builder window updates, use gpt-5.4, webview/devtools fixes, scrollbar fixes, and more

Author: sawka

emain/emain-builder.ts

@@ -4,7 +4,7 @@
 import { ClientService } from "@/app/store/services";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { randomUUID } from "crypto";
-import { BrowserWindow } from "electron";
+import { BrowserWindow, webContents } from "electron";
 import { globalEvents } from "emain/emain-events";
 import path from "path";
 import { getElectronAppBasePath, isDevVite, unamePlatform } from "./emain-platform";
@@ -87,6 +87,20 @@ export async function createBuilderWindow(appId: string): Promise<BuilderWindowT
     typedBuilderWindow.builderAppId = appId;
     typedBuilderWindow.savedInitOpts = initOpts;
 
+    typedBuilderWindow.on("close", () => {
+        const wc = typedBuilderWindow.webContents;
+        if (wc.isDevToolsOpened()) {
+            wc.closeDevTools();
+        }
+        for (const guest of webContents.getAllWebContents()) {
+            if (guest.getType() === "webview" && guest.hostWebContents?.id === wc.id) {
+                if (guest.isDevToolsOpened()) {
+                    guest.closeDevTools();
+                }
+            }
+        }
+    });
+
     typedBuilderWindow.on("focus", () => {
         focusedBuilderWindow = typedBuilderWindow;
         console.log("builder window focused", builderId);

emain/emain-ipc.ts

@@ -490,6 +490,17 @@ export function initIpcHandlers() {
                 console.error("Error deleting builder rtinfo:", e);
             }
         }
+        const wc = bw.webContents;
+        if (wc.isDevToolsOpened()) {
+            wc.closeDevTools();
+        }
+        for (const guest of electron.webContents.getAllWebContents()) {
+            if (guest.getType() === "webview" && guest.hostWebContents?.id === wc.id) {
+                if (guest.isDevToolsOpened()) {
+                    guest.closeDevTools();
+                }
+            }
+        }
         bw.destroy();
     });
 

emain/emain-window.ts

@@ -5,7 +5,7 @@ import { ClientService, ObjectService, WindowService, WorkspaceService } from "@
 import { waveEventSubscribeSingle } from "@/app/store/wps";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { fireAndForget } from "@/util/util";
-import { BaseWindow, BaseWindowConstructorOptions, dialog, globalShortcut, ipcMain, screen } from "electron";
+import { BaseWindow, BaseWindowConstructorOptions, dialog, globalShortcut, ipcMain, screen, webContents } from "electron";
 import { globalEvents } from "emain/emain-events";
 import path from "path";
 import { debounce } from "throttle-debounce";
@@ -299,6 +299,7 @@ export class WaveBrowserWindow extends BaseWindow {
             if (this.isDestroyed()) {
                 return;
             }
+            this.closeAllDevTools();
             console.log("win 'close' handler fired", this.waveWindowId);
             if (getGlobalIsQuitting() || updater?.status == "installing" || getGlobalIsRelaunching()) {
                 return;
@@ -358,6 +359,24 @@ export class WaveBrowserWindow extends BaseWindow {
         setTimeout(() => globalEvents.emit("windows-updated"), 50);
     }
 
+    private closeAllDevTools() {
+        for (const tabView of this.allLoadedTabViews.values()) {
+            if (tabView.webContents?.isDevToolsOpened()) {
+                tabView.webContents.closeDevTools();
+            }
+        }
+        const tabViewIds = new Set(
+            [...this.allLoadedTabViews.values()].map((tv) => tv.webContents?.id).filter((id) => id != null)
+        );
+        for (const wc of webContents.getAllWebContents()) {
+            if (wc.getType() === "webview" && tabViewIds.has(wc.hostWebContents?.id)) {
+                if (wc.isDevToolsOpened()) {
+                    wc.closeDevTools();
+                }
+            }
+        }
+    }
+
     private removeAllChildViews() {
         for (const tabView of this.allLoadedTabViews.values()) {
             if (!this.isDestroyed()) {

frontend/app/aipanel/waveai-model.tsx

@@ -41,6 +41,27 @@ export interface DroppedFile {
     previewUrl?: string;
 }
 
+const BuilderAIModeConfigs: Record<string, AIModeConfigType> = {
+    "waveaibuilder@default": {
+        "display:name": "Builder Default",
+        "display:order": -2,
+        "display:icon": "sparkles",
+        "display:description": "Good mix of speed and accuracy\n(gpt-5.4 with minimal thinking)",
+        "ai:provider": "wave",
+        "ai:switchcompat": ["wavecloud"],
+        "waveai:premium": true,
+    },
+    "waveaibuilder@deep": {
+        "display:name": "Builder Deep",
+        "display:order": -1,
+        "display:icon": "lightbulb",
+        "display:description": "Slower but most capable\n(gpt-5.4 with full reasoning)",
+        "ai:provider": "wave",
+        "ai:switchcompat": ["wavecloud"],
+        "waveai:premium": true,
+    },
+};
+
 export class WaveAIModel {
     private static instance: WaveAIModel | null = null;
     inputRef: React.RefObject<AIPanelInputRef> | null = null;
@@ -80,7 +101,11 @@ export class WaveAIModel {
         this.orefContext = orefContext;
         this.inBuilder = inBuilder;
         this.chatId = jotai.atom(null) as jotai.PrimitiveAtom<string>;
-        this.aiModeConfigs = atoms.waveaiModeConfigAtom;
+        if (inBuilder) {
+            this.aiModeConfigs = jotai.atom(BuilderAIModeConfigs) as jotai.Atom<Record<string, AIModeConfigType>>;
+        } else {
+            this.aiModeConfigs = atoms.waveaiModeConfigAtom;
+        }
 
         this.hasPremiumAtom = jotai.atom((get) => {
             const rateLimitInfo = get(atoms.waveAIRateLimitInfoAtom);
@@ -118,7 +143,7 @@ export class WaveAIModel {
         this.defaultModeAtom = jotai.atom((get) => {
             const telemetryEnabled = get(getSettingsKeyAtom("telemetry:enabled")) ?? false;
             if (this.inBuilder) {
-                return telemetryEnabled ? "waveai@balanced" : "invalid";
+                return telemetryEnabled ? "waveaibuilder@default" : "invalid";
             }
             const aiModeConfigs = get(this.aiModeConfigs);
             if (!telemetryEnabled) {

frontend/app/view/webview/webview.tsx

@@ -21,7 +21,7 @@ import { fireAndForget, useAtomValueSafe } from "@/util/util";
 import clsx from "clsx";
 import { WebviewTag } from "electron";
 import { Atom, PrimitiveAtom, atom, useAtomValue, useSetAtom } from "jotai";
-import { Fragment, createRef, memo, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, createRef, memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import "./webview.scss";
 import type { WebViewEnv } from "./webviewenv";
 
@@ -951,6 +951,15 @@ const WebView = memo(({ model, onFailLoad, blockRef, initialSrc }: WebViewProps)
         }, 100);
     }
 
+    useLayoutEffect(() => {
+        return () => {
+            const webview = model.webviewRef.current;
+            if (webview?.isDevToolsOpened()) {
+                webview.closeDevTools();
+            }
+        };
+    }, []);
+
     useEffect(() => {
         return () => {
             globalStore.set(model.domReady, false);

frontend/builder/builder-apppanel.tsx

@@ -257,6 +257,10 @@ const BuilderAppPanel = memo(() => {
         model.switchBuilderApp();
     }, [model]);
 
+    const handleOpenDevToolsClick = useCallback(() => {
+        model.openPreviewDevTools();
+    }, [model]);
+
     const handleKebabClick = useCallback(
         (e: React.MouseEvent) => {
             const menu: ContextMenuItem[] = [
@@ -267,14 +271,21 @@ const BuilderAppPanel = memo(() => {
                 {
                     type: "separator",
                 },
+                {
+                    label: "Open DevTools",
+                    click: handleOpenDevToolsClick,
+                },
+                {
+                    type: "separator",
+                },
                 {
                     label: "Switch App",
                     click: handleSwitchAppClick,
                 },
             ];
             ContextMenuModel.getInstance().showContextMenu(menu, e);
         },
-        [handleSwitchAppClick, handlePublishClick]
+        [handleSwitchAppClick, handlePublishClick, handleOpenDevToolsClick]
     );
 
     return (

frontend/builder/store/builder-apppanel-model.ts

@@ -7,6 +7,7 @@ import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { atoms, getApi, WOS } from "@/store/global";
 import { base64ToString, stringToBase64 } from "@/util/util";
+import { WebviewTag } from "electron";
 import { atom, type Atom, type PrimitiveAtom } from "jotai";
 import type * as MonacoTypes from "monaco-editor";
 import { debounce } from "throttle-debounce";
@@ -35,6 +36,7 @@ export class BuilderAppPanelModel {
     saveNeededAtom!: Atom<boolean>;
     focusElemRef: { current: HTMLInputElement | null } = { current: null };
     monacoEditorRef: { current: MonacoTypes.editor.IStandaloneCodeEditor | null } = { current: null };
+    webviewRef: { current: WebviewTag | null } = { current: null };
     statusUnsubFn: (() => void) | null = null;
     appGoUpdateUnsubFn: (() => void) | null = null;
     debouncedRestart: (() => void) & { cancel: () => void };
@@ -314,6 +316,15 @@ export class BuilderAppPanelModel {
         this.monacoEditorRef.current = ref;
     }
 
+    openPreviewDevTools() {
+        if (!this.webviewRef.current) return;
+        if (this.webviewRef.current.isDevToolsOpened()) {
+            this.webviewRef.current.closeDevTools();
+        } else {
+            this.webviewRef.current.openDevTools();
+        }
+    }
+
     dispose() {
         if (this.statusUnsubFn) {
             this.statusUnsubFn();

frontend/builder/tabs/builder-previewtab.tsx

@@ -70,8 +70,8 @@ const ErrorStateView = memo(({ errorMsg }: { errorMsg: string }) => {
                     <div className="flex flex-col gap-3">
                         <h2 className="text-2xl font-semibold text-error">Secrets Required</h2>
                         <p className="text-base text-secondary leading-relaxed">
-                            This app requires secrets that must be configured. Please use the Secrets tab to set and bind
-                            the required secrets for your app to run.
+                            This app requires secrets that must be configured. Please use the Secrets tab to set and
+                            bind the required secrets for your app to run.
                         </p>
                         <div className="text-left bg-panel border border-error/30 rounded-lg p-4 max-h-96 overflow-auto mt-2">
                             <pre className="text-sm text-secondary whitespace-pre-wrap font-mono">{displayMsg}</pre>
@@ -178,47 +178,48 @@ const BuilderPreviewTab = memo(() => {
     const originalContent = useAtomValue(model.originalContentAtom);
     const builderStatus = useAtomValue(model.builderStatusAtom);
     const builderId = useAtomValue(atoms.builderId);
-
     const fileExists = originalContent.length > 0;
-
-    if (isLoading) {
-        return null;
-    }
-
-    if (builderStatus?.status === "error") {
-        return <ErrorStateView errorMsg={builderStatus?.errormsg || ""} />;
-    }
-
-    if (!fileExists) {
-        return <EmptyStateView />;
-    }
+    const [lastKnownUrl, setLastKnownUrl] = useState<string>(null);
 
     const status = builderStatus?.status || "init";
+    const isWebViewActive = status === "running" && builderStatus?.port && builderStatus.port !== 0;
 
-    if (status === "init") {
-        return null;
-    }
-
-    if (status === "building") {
-        return <BuildingStateView />;
-    }
-
-    if (status === "stopped") {
-        return <StoppedStateView onStart={() => model.startBuilder()} />;
+    if (isWebViewActive) {
+        const previewUrl = `http://localhost:${builderStatus.port}/?clientid=wave:${builderId}`;
+        if (previewUrl !== lastKnownUrl) {
+            setLastKnownUrl(previewUrl);
+        }
     }
 
-    const shouldShowWebView = status === "running" && builderStatus?.port && builderStatus.port !== 0;
-
-    if (shouldShowWebView) {
-        const previewUrl = `http://localhost:${builderStatus.port}/?clientid=wave:${builderId}`;
-        return (
-            <div className="w-full h-full">
-                <webview src={previewUrl} className="w-full h-full" />
-            </div>
-        );
+    let overlay = null;
+    if (!isLoading && !isWebViewActive) {
+        if (builderStatus?.status === "error") {
+            overlay = <ErrorStateView errorMsg={builderStatus?.errormsg || ""} />;
+        } else if (!fileExists || status === "init") {
+            overlay = <EmptyStateView />;
+        } else if (status === "building") {
+            overlay = <BuildingStateView />;
+        } else if (status === "stopped") {
+            overlay = <StoppedStateView onStart={() => model.startBuilder()} />;
+        }
     }
 
-    return null;
+    return (
+        <div className="w-full h-full relative">
+            {lastKnownUrl && (
+                <webview
+                    ref={model.webviewRef}
+                    src={lastKnownUrl}
+                    className="w-full h-full"
+                    style={{
+                        visibility: isWebViewActive ? "visible" : "hidden",
+                        pointerEvents: isWebViewActive ? "auto" : "none",
+                    }}
+                />
+            )}
+            {overlay && <div className="absolute inset-0">{overlay}</div>}
+        </div>
+    );
 });
 
 BuilderPreviewTab.displayName = "BuilderPreviewTab";

pkg/aiusechat/uctypes/uctypes.go

@@ -163,9 +163,11 @@ const (
 )
 
 const (
-	AIModeQuick    = "waveai@quick"
-	AIModeBalanced = "waveai@balanced"
-	AIModeDeep     = "waveai@deep"
+	AIModeQuick          = "waveai@quick"
+	AIModeBalanced       = "waveai@balanced"
+	AIModeDeep           = "waveai@deep"
+	AIModeBuilderDefault = "waveaibuilder@default"
+	AIModeBuilderDeep    = "waveaibuilder@deep"
 )
 
 const (