add an onboarding upgrade modal (#2433)

Author: sawka

docs/docs/waveai.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3.4
+sidebar_position: 1.5
 id: "waveai"
 title: "Wave AI"
 ---

emain/emain-window.ts

@@ -24,6 +24,7 @@ import { updater } from "./updater";
 
 export type WindowOpts = {
     unamePlatform: string;
+    isPrimaryStartupWindow?: boolean;
 };
 
 const MIN_WINDOW_WIDTH = 800;
@@ -36,6 +37,7 @@ export const waveWindowMap = new Map<string, WaveBrowserWindow>(); // waveWindow
 export let focusedWaveWindow: WaveBrowserWindow = null;
 
 let cachedClientId: string = null;
+let hasCompletedFirstRelaunch = false;
 
 async function getClientId() {
     if (cachedClientId != null) {
@@ -51,6 +53,7 @@ type WindowActionQueueEntry =
           op: "switchtab";
           tabId: string;
           setInBackend: boolean;
+          primaryStartupTab?: boolean;
       }
     | {
           op: "createtab";
@@ -346,31 +349,35 @@ export class WaveBrowserWindow extends BaseWindow {
         await this._queueActionInternal({ op: "switchworkspace", workspaceId });
     }
 
-    async setActiveTab(tabId: string, setInBackend: boolean) {
-        console.log("setActiveTab", tabId, this.waveWindowId, this.workspaceId, setInBackend);
-        await this._queueActionInternal({ op: "switchtab", tabId, setInBackend });
+    async setActiveTab(tabId: string, setInBackend: boolean, primaryStartupTab = false) {
+        console.log("setActiveTab", tabId, this.waveWindowId, this.workspaceId, setInBackend, primaryStartupTab ? "(primary startup)" : "");
+        await this._queueActionInternal({ op: "switchtab", tabId, setInBackend, primaryStartupTab });
     }
 
-    private async initializeTab(tabView: WaveTabView) {
+    private async initializeTab(tabView: WaveTabView, primaryStartupTab: boolean) {
         const clientId = await getClientId();
         await tabView.initPromise;
         this.contentView.addChildView(tabView);
-        const initOpts = {
+        const initOpts: WaveInitOpts = {
             tabId: tabView.waveTabId,
             clientId: clientId,
             windowId: this.waveWindowId,
             activate: true,
         };
+        if (primaryStartupTab) {
+            initOpts.primaryTabStartup = true;
+        }
         tabView.savedInitOpts = { ...initOpts };
         tabView.savedInitOpts.activate = false;
+        delete tabView.savedInitOpts.primaryTabStartup;
         let startTime = Date.now();
-        console.log("before wave ready, init tab, sending wave-init", tabView.waveTabId);
+        console.log("before wave ready, init tab, sending wave-init", tabView.waveTabId, primaryStartupTab ? "(primary startup)" : "");
         tabView.webContents.send("wave-init", initOpts);
         await tabView.waveReadyPromise;
         console.log("wave-ready init time", Date.now() - startTime + "ms");
     }
 
-    private async setTabViewIntoWindow(tabView: WaveTabView, tabInitialized: boolean) {
+    private async setTabViewIntoWindow(tabView: WaveTabView, tabInitialized: boolean, primaryStartupTab = false) {
         if (this.activeTabView == tabView) {
             return;
         }
@@ -382,8 +389,8 @@ export class WaveBrowserWindow extends BaseWindow {
         this.activeTabView = tabView;
         this.allLoadedTabViews.set(tabView.waveTabId, tabView);
         if (!tabInitialized) {
-            console.log("initializing a new tab");
-            const p1 = this.initializeTab(tabView);
+            console.log("initializing a new tab", primaryStartupTab ? "(primary startup)" : "");
+            const p1 = this.initializeTab(tabView, primaryStartupTab);
             const p2 = this.repositionTabsSlowly(100);
             await Promise.all([p1, p2]);
         } else {
@@ -541,7 +548,8 @@ export class WaveBrowserWindow extends BaseWindow {
                     return;
                 }
                 const [tabView, tabInitialized] = await getOrCreateWebViewForTab(this.waveWindowId, tabId);
-                await this.setTabViewIntoWindow(tabView, tabInitialized);
+                const primaryStartupTabFlag = entry.op === "switchtab" ? entry.primaryStartupTab ?? false : false;
+                await this.setTabViewIntoWindow(tabView, tabInitialized, primaryStartupTabFlag);
             } catch (e) {
                 console.log("error caught in processActionQueue", e);
             } finally {
@@ -628,6 +636,7 @@ export async function createWindowForWorkspace(workspaceId: string) {
     }
     const newBwin = await createBrowserWindow(newWin, await RpcApi.GetFullConfigCommand(ElectronWshClient), {
         unamePlatform,
+        isPrimaryStartupWindow: false,
     });
     newBwin.show();
 }
@@ -653,7 +662,7 @@ export async function createBrowserWindow(
     console.log("createBrowserWindow", waveWindow.oid, workspace.oid, workspace);
     const bwin = new WaveBrowserWindow(waveWindow, fullConfig, opts);
     if (workspace.activetabid) {
-        await bwin.setActiveTab(workspace.activetabid, false);
+        await bwin.setActiveTab(workspace.activetabid, false, opts.isPrimaryStartupWindow ?? false);
     }
     return bwin;
 }
@@ -764,7 +773,10 @@ export async function createNewWaveWindow() {
         const existingWindowId = clientData.windowids[0];
         const existingWindowData = (await ObjectService.GetObject("window:" + existingWindowId)) as WaveWindow;
         if (existingWindowData != null) {
-            const win = await createBrowserWindow(existingWindowData, fullConfig, { unamePlatform });
+            const win = await createBrowserWindow(existingWindowData, fullConfig, {
+                unamePlatform,
+                isPrimaryStartupWindow: false,
+            });
             win.show();
             recreatedWindow = true;
         }
@@ -774,7 +786,10 @@ export async function createNewWaveWindow() {
         return;
     }
     console.log("creating new window");
-    const newBrowserWindow = await createBrowserWindow(null, fullConfig, { unamePlatform });
+    const newBrowserWindow = await createBrowserWindow(null, fullConfig, {
+        unamePlatform,
+        isPrimaryStartupWindow: false,
+    });
     newBrowserWindow.show();
 }
 
@@ -793,18 +808,26 @@ export async function relaunchBrowserWindows() {
 
     const clientData = await ClientService.GetClientData();
     const fullConfig = await RpcApi.GetFullConfigCommand(ElectronWshClient);
+    const windowIds = clientData.windowids ?? [];
     const wins: WaveBrowserWindow[] = [];
-    for (const windowId of clientData.windowids.slice().reverse()) {
+    const isFirstRelaunch = !hasCompletedFirstRelaunch;
+    const primaryWindowId = windowIds.length > 0 ? windowIds[0] : null;
+    for (const windowId of windowIds.slice().reverse()) {
         const windowData: WaveWindow = await WindowService.GetWindow(windowId);
         if (windowData == null) {
             console.log("relaunch -- window data not found, closing window", windowId);
             await WindowService.CloseWindow(windowId, true);
             continue;
         }
-        console.log("relaunch -- creating window", windowId, windowData);
-        const win = await createBrowserWindow(windowData, fullConfig, { unamePlatform });
+        const isPrimaryStartupWindow = isFirstRelaunch && windowId === primaryWindowId;
+        console.log("relaunch -- creating window", windowId, windowData, isPrimaryStartupWindow ? "(primary startup)" : "");
+        const win = await createBrowserWindow(windowData, fullConfig, {
+            unamePlatform,
+            isPrimaryStartupWindow
+        });
         wins.push(win);
     }
+    hasCompletedFirstRelaunch = true;
     for (const win of wins) {
         console.log("show window", win.waveWindowId);
         win.show();

emain/emain-wsh.ts

@@ -52,7 +52,10 @@ export class ElectronWshClientType extends WshClient {
             if (window == null) {
                 throw new Error(`window ${windowId} not found`);
             }
-            ww = await createBrowserWindow(window, fullConfig, { unamePlatform });
+            ww = await createBrowserWindow(window, fullConfig, {
+                unamePlatform,
+                isPrimaryStartupWindow: false,
+            });
         }
         ww.focus();
     }

emain/emain.ts

@@ -98,7 +98,10 @@ function handleWSEvent(evtMsg: WSEventType) {
                 return;
             }
             const fullConfig = await RpcApi.GetFullConfigCommand(ElectronWshClient);
-            const newWin = await createBrowserWindow(windowData, fullConfig, { unamePlatform });
+            const newWin = await createBrowserWindow(windowData, fullConfig, {
+                unamePlatform,
+                isPrimaryStartupWindow: false,
+            });
             newWin.show();
         } else if (evtMsg.eventtype == "electron:closewindow") {
             console.log("electron:closewindow", evtMsg.data);

frontend/app/aipanel/telemetryrequired.tsx

@@ -5,6 +5,7 @@ import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { cn } from "@/util/util";
 import { useState } from "react";
+import { WaveAIModel } from "./waveai-model";
 
 interface TelemetryRequiredMessageProps {
     className?: string;
@@ -17,6 +18,9 @@ const TelemetryRequiredMessage = ({ className }: TelemetryRequiredMessageProps)
         setIsEnabling(true);
         try {
             await RpcApi.WaveAIEnableTelemetryCommand(TabRpcClient);
+            setTimeout(() => {
+                WaveAIModel.getInstance().focusInput();
+            }, 100);
         } catch (error) {
             console.error("Failed to enable telemetry:", error);
             setIsEnabling(false);

frontend/app/modals/modalregistry.tsx

@@ -2,12 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { MessageModal } from "@/app/modals/messagemodal";
-import { OnboardingModal } from "@/app/onboarding/onboarding";
+import { NewInstallOnboardingModal } from "@/app/onboarding/onboarding";
+import { UpgradeOnboardingModal } from "@/app/onboarding/onboarding-upgrade";
 import { AboutModal } from "./about";
 import { UserInputModal } from "./userinputmodal";
 
 const modalRegistry: { [key: string]: React.ComponentType<any> } = {
-    [OnboardingModal.displayName || "OnboardingModal"]: OnboardingModal,
+    [NewInstallOnboardingModal.displayName || "NewInstallOnboardingModal"]: NewInstallOnboardingModal,
+    [UpgradeOnboardingModal.displayName || "UpgradeOnboardingModal"]: UpgradeOnboardingModal,
     [UserInputModal.displayName || "UserInputModal"]: UserInputModal,
     [AboutModal.displayName || "AboutModal"]: AboutModal,
     [MessageModal.displayName || "MessageModal"]: MessageModal,

frontend/app/modals/modalsrenderer.tsx

@@ -1,16 +1,20 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { OnboardingModal } from "@/app/onboarding/onboarding";
-import { atoms, globalStore } from "@/store/global";
+import { NewInstallOnboardingModal } from "@/app/onboarding/onboarding";
+import { CurrentOnboardingVersion } from "@/app/onboarding/onboarding-features";
+import { UpgradeOnboardingModal } from "@/app/onboarding/onboarding-upgrade";
+import { atoms, globalPrimaryTabStartup, globalStore } from "@/store/global";
 import { modalsModel } from "@/store/modalmodel";
 import * as jotai from "jotai";
 import { useEffect } from "react";
+import semver from "semver";
 import { getModalComponent } from "./modalregistry";
 
 const ModalsRenderer = () => {
     const clientData = jotai.useAtomValue(atoms.client);
-    const [tosOpen, setTosOpen] = jotai.useAtom(modalsModel.tosOpen);
+    const [newInstallOnboardingOpen, setNewInstallOnboardingOpen] = jotai.useAtom(modalsModel.newInstallOnboardingOpen);
+    const [upgradeOnboardingOpen, setUpgradeOnboardingOpen] = jotai.useAtom(modalsModel.upgradeOnboardingOpen);
     const [modals] = jotai.useAtom(modalsModel.modalsAtom);
     const rtn: React.ReactElement[] = [];
     for (const modal of modals) {
@@ -19,14 +23,30 @@ const ModalsRenderer = () => {
             rtn.push(<ModalComponent key={modal.displayName} {...modal.props} />);
         }
     }
-    if (tosOpen) {
-        rtn.push(<OnboardingModal key={OnboardingModal.displayName} />);
+    if (newInstallOnboardingOpen) {
+        rtn.push(<NewInstallOnboardingModal key={NewInstallOnboardingModal.displayName} />);
+    }
+    if (upgradeOnboardingOpen) {
+        rtn.push(<UpgradeOnboardingModal key={UpgradeOnboardingModal.displayName} />);
     }
     useEffect(() => {
         if (!clientData.tosagreed) {
-            setTosOpen(true);
+            setNewInstallOnboardingOpen(true);
         }
     }, [clientData]);
+
+    useEffect(() => {
+        if (!globalPrimaryTabStartup) {
+            return;
+        }
+        if (!clientData.tosagreed) {
+            return;
+        }
+        const lastVersion = clientData.meta?.["onboarding:lastversion"] ?? "v0.0.0";
+        if (semver.lt(lastVersion, CurrentOnboardingVersion)) {
+            setUpgradeOnboardingOpen(true);
+        }
+    }, []);
     useEffect(() => {
         globalStore.set(atoms.modalOpen, rtn.length > 0);
     }, [rtn]);

frontend/app/onboarding/onboarding-features.tsx

@@ -5,6 +5,8 @@ import Logo from "@/app/asset/logo.svg";
 import { Button } from "@/app/element/button";
 import { EmojiButton } from "@/app/element/emojibutton";
 import { MagnifyIcon } from "@/app/element/magnify";
+import { atoms, globalStore } from "@/app/store/global";
+import * as WOS from "@/app/store/wos";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { isMacOS } from "@/util/platformutil";
@@ -13,6 +15,8 @@ import { FakeChat } from "./fakechat";
 import { EditBashrcCommand, ViewLogoCommand, ViewShortcutsCommand } from "./onboarding-command";
 import { FakeLayout } from "./onboarding-layout";
 
+export const CurrentOnboardingVersion = "v0.12.0";
+
 type FeaturePageName = "waveai" | "magnify" | "files";
 
 const OnboardingFooter = ({
@@ -72,6 +76,7 @@ const WaveAIPage = ({ onNext, onSkip }: { onNext: () => void; onSkip: () => void
                 event: "onboarding:fire",
                 props: {
                     "onboarding:feature": "waveai",
+                    "onboarding:version": CurrentOnboardingVersion,
                 },
             });
         }
@@ -158,6 +163,7 @@ const MagnifyBlocksPage = ({
                 event: "onboarding:fire",
                 props: {
                     "onboarding:feature": "magnify",
+                    "onboarding:version": CurrentOnboardingVersion,
                 },
             });
         }
@@ -216,6 +222,7 @@ const FilesPage = ({ onFinish, onPrev }: { onFinish: () => void; onPrev?: () =>
                 event: "onboarding:fire",
                 props: {
                     "onboarding:feature": "wsh",
+                    "onboarding:version": CurrentOnboardingVersion,
                 },
             });
         }
@@ -300,9 +307,16 @@ export const OnboardingFeatures = ({ onComplete }: { onComplete: () => void }) =
     const [currentPage, setCurrentPage] = useState<FeaturePageName>("waveai");
 
     useEffect(() => {
+        const clientId = globalStore.get(atoms.clientId);
+        RpcApi.SetMetaCommand(TabRpcClient, {
+            oref: WOS.makeORef("client", clientId),
+            meta: { "onboarding:lastversion": CurrentOnboardingVersion },
+        });
         RpcApi.RecordTEventCommand(TabRpcClient, {
             event: "onboarding:start",
-            props: {},
+            props: {
+                "onboarding:version": CurrentOnboardingVersion,
+            },
         });
     }, []);