tsunami builder 3 (checkpoint) (#2487)

Got preview hooked up, log output hooked up, environment tab hooked
up... the controller, restarting the apps. it is actually working! still
lots to do and lots of hard coding to fix, but it is coming together...

Author: sawka

.roo/rules/rules.md

@@ -34,6 +34,7 @@ It has a TypeScript/React frontend and a Go backend. They talk together over `ws
     - Use all lowercase filenames (except where case is actually important like Taskfile.yml)
     - Import the "cn" function from "@/util/util" to do classname / clsx class merge (it uses twMerge underneath)
     - For element variants use class-variance-authority
+    - Do NOT create private fields in classes (they are impossible to inspect)
   - **Component Practices**:
     - Make sure to add cursor-pointer to buttons/links and clickable items
     - NEVER use cursor-help (it looks terrible)

cmd/server/main-server.go

@@ -353,6 +353,11 @@ func main() {
 		log.Printf("error ensuring wave presets dir: %v\n", err)
 		return
 	}
+	err = wavebase.EnsureWaveCachesDir()
+	if err != nil {
+		log.Printf("error ensuring wave caches dir: %v\n", err)
+		return
+	}
 	waveLock, err := wavebase.AcquireWaveLock()
 	if err != nil {
 		log.Printf("error acquiring wave lock (another instance of Wave is likely running): %v\n", err)

emain/emain-builder.ts

@@ -103,6 +103,7 @@ export async function createBuilderWindow(appId: string): Promise<BuilderWindowT
         if (focusedBuilderWindow === typedBuilderWindow) {
             focusedBuilderWindow = null;
         }
+        RpcApi.DeleteBuilderCommand(ElectronWshClient, builderId, { noresponse: true });
         setTimeout(() => globalEvents.emit("windows-updated"), 50);
     });
 

frontend/app/aipanel/waveai-model.tsx

@@ -14,7 +14,7 @@ import * as WOS from "@/app/store/wos";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { WorkspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
-import { BuilderFocusManager } from "@/builder/store/builderFocusManager";
+import { BuilderFocusManager } from "@/builder/store/builder-focusmanager";
 import { getWebServerEndpoint } from "@/util/endpoints";
 import { ChatStatus } from "ai";
 import * as jotai from "jotai";

frontend/app/store/wshclientapi.ts

@@ -122,6 +122,11 @@ class RpcApiType {
         return client.wshRpcCall("deleteblock", data, opts);
     }
 
+    // command "deletebuilder" [call]
+    DeleteBuilderCommand(client: WshClient, data: string, opts?: RpcOpts): Promise<void> {
+        return client.wshRpcCall("deletebuilder", data, opts);
+    }
+
     // command "deletesubblock" [call]
     DeleteSubBlockCommand(client: WshClient, data: CommandDeleteBlockData, opts?: RpcOpts): Promise<void> {
         return client.wshRpcCall("deletesubblock", data, opts);
@@ -262,6 +267,16 @@ class RpcApiType {
         return client.wshRpcCall("focuswindow", data, opts);
     }
 
+    // command "getbuilderoutput" [call]
+    GetBuilderOutputCommand(client: WshClient, data: string, opts?: RpcOpts): Promise<string[]> {
+        return client.wshRpcCall("getbuilderoutput", data, opts);
+    }
+
+    // command "getbuilderstatus" [call]
+    GetBuilderStatusCommand(client: WshClient, data: string, opts?: RpcOpts): Promise<BuilderStatusData> {
+        return client.wshRpcCall("getbuilderstatus", data, opts);
+    }
+
     // command "getfullconfig" [call]
     GetFullConfigCommand(client: WshClient, opts?: RpcOpts): Promise<FullConfigType> {
         return client.wshRpcCall("getfullconfig", null, opts);
@@ -462,6 +477,11 @@ class RpcApiType {
         return client.wshRpcCall("setview", data, opts);
     }
 
+    // command "startbuilder" [call]
+    StartBuilderCommand(client: WshClient, data: CommandStartBuilderData, opts?: RpcOpts): Promise<void> {
+        return client.wshRpcCall("startbuilder", data, opts);
+    }
+
     // command "streamcpudata" [responsestream]
 	StreamCpuDataCommand(client: WshClient, data: CpuDataRequest, opts?: RpcOpts): AsyncGenerator<TimeSeriesData, void, boolean> {
         return client.wshRpcStream("streamcpudata", data, opts);

frontend/builder/builder-apppanel.tsx

@@ -1,52 +1,115 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { BuilderAppPanelModel, type TabType } from "@/builder/store/builderAppPanelModel";
-import { BuilderFocusManager } from "@/builder/store/builderFocusManager";
+import { BuilderAppPanelModel, type TabType } from "@/builder/store/builder-apppanel-model";
+import { BuilderFocusManager } from "@/builder/store/builder-focusmanager";
 import { BuilderCodeTab } from "@/builder/tabs/builder-codetab";
+import { BuilderEnvTab } from "@/builder/tabs/builder-envtab";
 import { BuilderFilesTab } from "@/builder/tabs/builder-filestab";
 import { BuilderPreviewTab } from "@/builder/tabs/builder-previewtab";
 import { builderAppHasSelection } from "@/builder/utils/builder-focus-utils";
 import { ErrorBoundary } from "@/element/errorboundary";
 import { atoms } from "@/store/global";
 import { cn } from "@/util/util";
 import { useAtomValue } from "jotai";
-import { memo, useCallback, useRef } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
+
+const StatusDot = memo(() => {
+    const model = BuilderAppPanelModel.getInstance();
+    const builderStatus = useAtomValue(model.builderStatusAtom);
+
+    const getStatusDotColor = (status: string | null | undefined): string => {
+        if (!status) return "bg-gray-500";
+        switch (status) {
+            case "init":
+            case "stopped":
+                return "bg-gray-500";
+            case "building":
+                return "bg-warning";
+            case "running":
+                return "bg-success";
+            case "error":
+                return "bg-error";
+            default:
+                return "bg-gray-500";
+        }
+    };
+
+    const statusDotColor = getStatusDotColor(builderStatus?.status);
+
+    return <span className={cn("w-2 h-2 rounded-full", statusDotColor)} />;
+});
+
+StatusDot.displayName = "StatusDot";
 
 type TabButtonProps = {
     label: string;
     tabType: TabType;
     isActive: boolean;
     isAppFocused: boolean;
     onClick: () => void;
+    showStatusDot?: boolean;
 };
 
-const TabButton = memo(({ label, tabType, isActive, isAppFocused, onClick }: TabButtonProps) => {
+const TabButton = memo(({ label, tabType, isActive, isAppFocused, onClick, showStatusDot }: TabButtonProps) => {
     return (
         <button
             className={cn(
                 "px-4 py-2 text-sm font-medium transition-colors cursor-pointer",
                 isActive
-                    ? `text-main-text border-b-2 ${isAppFocused ? "border-accent" : "border-gray-500"}`
-                    : "text-gray-500 hover:text-secondary border-b-2 border-transparent"
+                    ? `text-primary border-b-2 ${isAppFocused ? "border-accent" : "border-gray-500"}`
+                    : "text-secondary hover:text-primary border-b-2 border-transparent"
             )}
             onClick={onClick}
         >
-            {label}
+            <span className="flex items-center gap-2">
+                {showStatusDot && <StatusDot />}
+                {label}
+            </span>
         </button>
     );
 });
 
 TabButton.displayName = "TabButton";
 
+const ErrorStrip = memo(() => {
+    const model = BuilderAppPanelModel.getInstance();
+    const errorMsg = useAtomValue(model.errorAtom);
+
+    if (!errorMsg) return null;
+    return (
+        <div className="shrink-0 bg-error/10 border-b border-error/30 px-4 py-2 flex items-center justify-between gap-4">
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+                <i className="fa fa-triangle-exclamation text-error text-sm" />
+                <span className="text-error text-sm flex-1 truncate">{errorMsg}</span>
+            </div>
+            <button
+                onClick={() => model.clearError()}
+                className="shrink-0 text-error hover:text-error/80 transition-colors cursor-pointer"
+                aria-label="Close error"
+            >
+                <i className="fa fa-xmark-large text-sm" />
+            </button>
+        </div>
+    );
+});
+
+ErrorStrip.displayName = "ErrorStrip";
+
 const BuilderAppPanel = memo(() => {
     const model = BuilderAppPanelModel.getInstance();
     const focusElemRef = useRef<HTMLInputElement>(null);
     const activeTab = useAtomValue(model.activeTab);
     const focusType = useAtomValue(BuilderFocusManager.getInstance().focusType);
     const isAppFocused = focusType === "app";
     const saveNeeded = useAtomValue(model.saveNeededAtom);
+    const envSaveNeeded = useAtomValue(model.envVarsDirtyAtom);
     const builderAppId = useAtomValue(atoms.builderAppId);
+    const builderId = useAtomValue(atoms.builderId);
+
+    useEffect(() => {
+        model.initialize();
+    }, []);
 
     if (focusElemRef.current) {
         model.setFocusElemRef(focusElemRef.current);
@@ -58,44 +121,54 @@ const BuilderAppPanel = memo(() => {
         model.giveFocus();
     };
 
-    const handleFocusCapture = useCallback(
-        (event: React.FocusEvent) => {
-            BuilderFocusManager.getInstance().setAppFocused();
-        },
-        []
-    );
-
-    const handlePanelClick = useCallback((e: React.MouseEvent) => {
-        const target = e.target as HTMLElement;
-        const isInteractive = target.closest('button, a, input, textarea, select, [role="button"], [tabindex]');
+    const handleFocusCapture = useCallback((event: React.FocusEvent) => {
+        BuilderFocusManager.getInstance().setAppFocused();
+    }, []);
 
-        if (isInteractive) {
-            return;
-        }
+    const handlePanelClick = useCallback(
+        (e: React.MouseEvent) => {
+            const target = e.target as HTMLElement;
+            const isInteractive = target.closest('button, a, input, textarea, select, [role="button"], [tabindex]');
 
-        const hasSelection = builderAppHasSelection();
-        if (hasSelection) {
-            BuilderFocusManager.getInstance().setAppFocused();
-            return;
-        }
+            if (isInteractive) {
+                return;
+            }
 
-        setTimeout(() => {
-            if (!builderAppHasSelection()) {
+            const hasSelection = builderAppHasSelection();
+            if (hasSelection) {
                 BuilderFocusManager.getInstance().setAppFocused();
-                model.giveFocus();
+                return;
             }
-        }, 0);
-    }, [model]);
+
+            setTimeout(() => {
+                if (!builderAppHasSelection()) {
+                    BuilderFocusManager.getInstance().setAppFocused();
+                    model.giveFocus();
+                }
+            }, 0);
+        },
+        [model]
+    );
 
     const handleSave = useCallback(() => {
         if (builderAppId) {
             model.saveAppFile(builderAppId);
         }
     }, [builderAppId, model]);
 
+    const handleEnvSave = useCallback(() => {
+        if (builderId) {
+            model.saveEnvVars(builderId);
+        }
+    }, [builderId, model]);
+
+    const handleRestart = useCallback(() => {
+        model.restartBuilder();
+    }, [model]);
+
     return (
         <div
-            className="w-full h-full flex flex-col border-b border-border"
+            className="w-full h-full flex flex-col border-b-3 border-border shadow-[0_2px_4px_rgba(0,0,0,0.1)]"
             data-builder-app-panel="true"
             onClick={handlePanelClick}
             onFocusCapture={handleFocusCapture}
@@ -118,6 +191,7 @@ const BuilderAppPanel = memo(() => {
                             isActive={activeTab === "preview"}
                             isAppFocused={isAppFocused}
                             onClick={() => handleTabClick("preview")}
+                            showStatusDot={true}
                         />
                         <TabButton
                             label="Code"
@@ -126,14 +200,31 @@ const BuilderAppPanel = memo(() => {
                             isAppFocused={isAppFocused}
                             onClick={() => handleTabClick("code")}
                         />
+                        {false && (
+                            <TabButton
+                                label="Static Files"
+                                tabType="files"
+                                isActive={activeTab === "files"}
+                                isAppFocused={isAppFocused}
+                                onClick={() => handleTabClick("files")}
+                            />
+                        )}
                         <TabButton
-                            label="Static Files"
-                            tabType="files"
-                            isActive={activeTab === "files"}
+                            label="Env"
+                            tabType="env"
+                            isActive={activeTab === "env"}
                             isAppFocused={isAppFocused}
-                            onClick={() => handleTabClick("files")}
+                            onClick={() => handleTabClick("env")}
                         />
                     </div>
+                    {activeTab === "preview" && (
+                        <button
+                            className="mr-4 px-3 py-1 text-sm font-medium rounded transition-colors bg-accent/80 text-white hover:bg-accent cursor-pointer"
+                            onClick={handleRestart}
+                        >
+                            Restart App
+                        </button>
+                    )}
                     {activeTab === "code" && (
                         <button
                             className={cn(
@@ -147,8 +238,22 @@ const BuilderAppPanel = memo(() => {
                             Save
                         </button>
                     )}
+                    {activeTab === "env" && (
+                        <button
+                            className={cn(
+                                "mr-4 px-3 py-1 text-sm font-medium rounded transition-colors",
+                                envSaveNeeded
+                                    ? "bg-accent text-white hover:opacity-80 cursor-pointer"
+                                    : "bg-gray-600 text-gray-400 cursor-default"
+                            )}
+                            onClick={envSaveNeeded ? handleEnvSave : undefined}
+                        >
+                            Save
+                        </button>
+                    )}
                 </div>
             </div>
+            <ErrorStrip />
             <div className="flex-1 overflow-auto py-1">
                 <div className="w-full h-full" style={{ display: activeTab === "preview" ? "block" : "none" }}>
                     <ErrorBoundary>
@@ -165,6 +270,11 @@ const BuilderAppPanel = memo(() => {
                         <BuilderFilesTab />
                     </ErrorBoundary>
                 </div>
+                <div className="w-full h-full" style={{ display: activeTab === "env" ? "block" : "none" }}>
+                    <ErrorBoundary>
+                        <BuilderEnvTab />
+                    </ErrorBoundary>
+                </div>
             </div>
         </div>
     );