show UI before server loads with welcome msg

5 files changed, 123 insertions, 26 deletions

diff --git a/extension/package-lock.json b/extension/package-lock.json
index 9557336f..8f35c720 100644
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "continue",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "continue",
-      "version": "0.0.84",
+      "version": "0.0.85",
       "license": "Apache-2.0",
       "dependencies": {
         "@electron/rebuild": "^3.2.10",
diff --git a/extension/package.json b/extension/package.json
index fd18d494..3f030c3a 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -14,7 +14,7 @@
   "displayName": "Continue",
   "pricing": "Free",
   "description": "Accelerating software development with language models",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "publisher": "Continue",
   "engines": {
     "vscode": "^1.74.0"
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 13b74423..249d9785 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -64,7 +64,101 @@ function GUI(props: GUIProps) {
   const [dataSwitchChecked, setDataSwitchChecked] = useState(false);
   const [showDataSharingInfo, setShowDataSharingInfo] = useState(false);
   const [stepsOpen, setStepsOpen] = useState<boolean[]>([]);
-  const [history, setHistory] = useState<History | undefined>();
+  const [history, setHistory] = useState<History | undefined>({
+    timeline: [
+      {
+        step: {
+          name: "SequentialStep",
+          hide: true,
+          description: "Running step: SequentialStep",
+          system_message: null,
+          chat_context: [],
+          manage_own_chat_context: false,
+          steps: [
+            {
+              name: "Welcome to Continue",
+              hide: false,
+              description:
+                "Type '/' to see the list of available slash commands. If you highlight code, edits and explanations will be localized to the highlighted range. Otherwise, the currently open file is used. In both cases, the code is combined with the previous steps to construct the context.",
+              system_message: null,
+              chat_context: [],
+              manage_own_chat_context: false,
+              message:
+                "Type '/' to see the list of available slash commands. If you highlight code, edits and explanations will be localized to the highlighted range. Otherwise, the currently open file is used. In both cases, the code is combined with the previous steps to construct the context.",
+            },
+            {
+              name: "Welcome to Continue!",
+              hide: true,
+              description: "Welcome to Continue!",
+              system_message: null,
+              chat_context: [],
+              manage_own_chat_context: false,
+            },
+            {
+              name: "StepsOnStartupStep",
+              hide: true,
+              description: "Running steps on startup",
+              system_message: null,
+              chat_context: [],
+              manage_own_chat_context: false,
+            },
+          ],
+        },
+        observation: null,
+        depth: 0,
+        deleted: false,
+        active: false,
+      },
+      {
+        step: {
+          name: "Welcome to Continue",
+          hide: false,
+          description:
+            "Type '/' to see the list of available slash commands. If you highlight code, edits and explanations will be localized to the highlighted range. Otherwise, the currently open file is used. In both cases, the code is combined with the previous steps to construct the context.",
+          system_message: null,
+          chat_context: [],
+          manage_own_chat_context: false,
+          message:
+            "Type '/' to see the list of available slash commands. If you highlight code, edits and explanations will be localized to the highlighted range. Otherwise, the currently open file is used. In both cases, the code is combined with the previous steps to construct the context.",
+        },
+        observation: {
+          text: "Type '/' to see the list of available slash commands. If you highlight code, edits and explanations will be localized to the highlighted range. Otherwise, the currently open file is used. In both cases, the code is combined with the previous steps to construct the context.",
+        },
+        depth: 1,
+        deleted: false,
+        active: false,
+      },
+      {
+        step: {
+          name: "Welcome to Continue!",
+          hide: true,
+          description: "Welcome to Continue!",
+          system_message: null,
+          chat_context: [],
+          manage_own_chat_context: false,
+        },
+        observation: null,
+        depth: 1,
+        deleted: false,
+        active: false,
+      },
+      {
+        step: {
+          name: "StepsOnStartupStep",
+          hide: true,
+          description: "Running steps on startup",
+          system_message: null,
+          chat_context: [],
+          manage_own_chat_context: false,
+        },
+        observation: null,
+        depth: 1,
+        deleted: false,
+        active: false,
+      },
+    ],
+    current_index: 3,
+  } as any);
   //   {
   //   timeline: [
   //     {
@@ -228,7 +322,6 @@ function GUI(props: GUIProps) {
   }, []);
 
   useEffect(() => {
-    console.log("CLIENT ON STATE UPDATE: ", client, client?.onStateUpdate);
     client?.onStateUpdate((state) => {
       // Scroll only if user is at very bottom of the window.
       setUsingFastModel(state.default_model === "gpt-3.5-turbo");
diff --git a/extension/src/activation/activate.ts b/extension/src/activation/activate.ts
index 05589d92..cd8f0cf3 100644
--- a/extension/src/activation/activate.ts
+++ b/extension/src/activation/activate.ts
@@ -24,20 +24,6 @@ export async function activateExtension(
   registerAllCodeLensProviders(context);
   registerAllCommands(context);
 
-  await new Promise((resolve, reject) => {
-    vscode.window.withProgress(
-      {
-        location: vscode.ProgressLocation.Notification,
-        title:
-          "Starting Continue Server... (it may take a minute to download Python packages)",
-        cancellable: false,
-      },
-      async (progress, token) => {
-        await startContinuePythonServer();
-        resolve(null);
-      }
-    );
-  });
   const serverUrl = getContinueServerUrl();
 
   ideProtocolClient = new IdeProtocolClient(
@@ -47,8 +33,8 @@ export async function activateExtension(
 
   // Setup the left panel
   (async () => {
-    const sessionId = await ideProtocolClient.getSessionId();
-    const provider = new ContinueGUIWebviewViewProvider(sessionId);
+    const sessionIdPromise = ideProtocolClient.getSessionId();
+    const provider = new ContinueGUIWebviewViewProvider(sessionIdPromise);
 
     context.subscriptions.push(
       vscode.window.registerWebviewViewProvider(
@@ -61,6 +47,20 @@ export async function activateExtension(
     );
   })();
 
+  await new Promise((resolve, reject) => {
+    vscode.window.withProgress(
+      {
+        location: vscode.ProgressLocation.Notification,
+        title:
+          "Starting Continue Server... (it may take a minute to download Python packages)",
+        cancellable: false,
+      },
+      async (progress, token) => {
+        await startContinuePythonServer();
+        resolve(null);
+      }
+    );
+  });
   // All opened terminals should be replaced by our own terminal
   // vscode.window.onDidOpenTerminal((terminal) => {});
 
diff --git a/extension/src/debugPanel.ts b/extension/src/debugPanel.ts
index b0db590a..79719a3b 100644
--- a/extension/src/debugPanel.ts
+++ b/extension/src/debugPanel.ts
@@ -126,7 +126,7 @@ let streamManager = new StreamManager();
 export let debugPanelWebview: vscode.Webview | undefined;
 export function setupDebugPanel(
   panel: vscode.WebviewPanel | vscode.WebviewView,
-  sessionId: string
+  sessionIdPromise: Promise<string>
 ): string {
   debugPanelWebview = panel.webview;
   panel.onDidDispose(() => {
@@ -224,6 +224,7 @@ export function setupDebugPanel(
   panel.webview.onDidReceiveMessage(async (data) => {
     switch (data.type) {
       case "onLoad": {
+        const sessionId = await sessionIdPromise;
         panel.webview.postMessage({
           type: "onLoad",
           vscMachineId: vscode.env.machineId,
@@ -334,10 +335,10 @@ export class ContinueGUIWebviewViewProvider
   implements vscode.WebviewViewProvider
 {
   public static readonly viewType = "continue.continueGUIView";
-  private readonly sessionId: string;
+  private readonly sessionIdPromise: Promise<string>;
 
-  constructor(sessionId: string) {
-    this.sessionId = sessionId;
+  constructor(sessionIdPromise: Promise<string>) {
+    this.sessionIdPromise = sessionIdPromise;
   }
 
   resolveWebviewView(
@@ -345,6 +346,9 @@ export class ContinueGUIWebviewViewProvider
     _context: vscode.WebviewViewResolveContext,
     _token: vscode.CancellationToken
   ): void | Thenable<void> {
-    webviewView.webview.html = setupDebugPanel(webviewView, this.sessionId);
+    webviewView.webview.html = setupDebugPanel(
+      webviewView,
+      this.sessionIdPromise
+    );
   }
 }