tsunami app builder 2 (#2486)

Author: sawka

.vscode/settings.json

@@ -61,5 +61,6 @@
             "QF1003": false
         },
         "directoryFilters": ["-tsunami/frontend/scaffold"]
-    }
+    },
+    "tailwindCSS.lint.suggestCanonicalClasses": "ignore"
 }

emain/emain-ipc.ts

@@ -396,7 +396,7 @@ export function initIpcHandlers() {
     });
 
     electron.ipcMain.on("open-builder", (event, appId?: string) => {
-        fireAndForget(() => createBuilderWindow(appId || "<new>"));
+        fireAndForget(() => createBuilderWindow(appId || ""));
     });
 
     electron.ipcMain.on("open-new-window", () => fireAndForget(createNewWaveWindow));

emain/emain-menu.ts

@@ -95,7 +95,7 @@ async function getAppMenu(
     if (isDev) {
         fileMenu.splice(1, 0, {
             label: "New WaveApp Builder Window",
-            click: () => fireAndForget(() => createBuilderWindow("<new>")),
+            click: () => fireAndForget(() => createBuilderWindow("")),
         });
     }
     if (numWaveWindows == 0) {

frontend/app/aipanel/aipanel.tsx

@@ -232,6 +232,7 @@ const AIPanelComponentInner = memo(({ className, onClose }: AIPanelProps) => {
                 };
                 if (windowType === "builder") {
                     body.builderid = globalStore.get(atoms.builderId);
+                    body.builderappid = globalStore.get(atoms.builderAppId);
                 } else {
                     body.tabid = globalStore.get(atoms.staticTabId);
                 }

frontend/app/modals/modal.scss

@@ -14,7 +14,7 @@
 
     .modal-backdrop {
         position: fixed;
-        top: 0;
+        top: 36px;
         left: 0;
         right: 0;
         bottom: 0;

frontend/app/store/global.ts

@@ -17,7 +17,7 @@ import {
 import { getWebServerEndpoint } from "@/util/endpoints";
 import { fetch } from "@/util/fetchutil";
 import { setPlatform } from "@/util/platformutil";
-import { deepCompareReturnPrev, fireAndForget, getPrefixedSettings, isBlank } from "@/util/util";
+import { base64ToString, deepCompareReturnPrev, fireAndForget, getPrefixedSettings, isBlank } from "@/util/util";
 import { atom, Atom, PrimitiveAtom, useAtomValue } from "jotai";
 import { globalStore } from "./jotaiStore";
 import { modalsModel } from "./modalmodel";
@@ -54,6 +54,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
     const windowIdAtom = atom(initOpts.windowId) as PrimitiveAtom<string>;
     const clientIdAtom = atom(initOpts.clientId) as PrimitiveAtom<string>;
     const builderIdAtom = atom(initOpts.builderId) as PrimitiveAtom<string>;
+    const builderAppIdAtom = atom<string>(null) as PrimitiveAtom<string>;
     const waveWindowTypeAtom = atom((get) => {
         const builderId = get(builderIdAtom);
         return builderId != null ? "builder" : "tab";
@@ -172,6 +173,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         // initialized in wave.ts (will not be null inside of application)
         clientId: clientIdAtom,
         builderId: builderIdAtom,
+        builderAppId: builderAppIdAtom,
         waveWindowType: waveWindowTypeAtom,
         uiContext: uiContextAtom,
         client: clientAtom,
@@ -547,7 +549,7 @@ async function fetchWaveFile(
     if (fileInfo64 == null) {
         throw new Error(`missing zone file info for ${zoneId}:${fileName}`);
     }
-    const fileInfo = JSON.parse(atob(fileInfo64));
+    const fileInfo = JSON.parse(base64ToString(fileInfo64));
     const data = await resp.arrayBuffer();
     return { data: new Uint8Array(data), fileInfo };
 }

frontend/app/store/tabrpcclient.ts

@@ -5,7 +5,7 @@ import { WaveAIModel } from "@/app/aipanel/waveai-model";
 import { getApi } from "@/app/store/global";
 import { WorkspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
 import { getLayoutModelForStaticTab } from "@/layout/index";
-import { base64ToArray } from "@/util/util";
+import { base64ToArrayBuffer } from "@/util/util";
 import { RpcResponseHelper, WshClient } from "./wshclient";
 
 export class TabClient extends WshClient {
@@ -74,7 +74,7 @@ export class TabClient extends WshClient {
 
         if (data.files && data.files.length > 0) {
             for (const fileData of data.files) {
-                const decodedData = base64ToArray(fileData.data64);
+                const decodedData = base64ToArrayBuffer(fileData.data64);
                 const blob = new Blob([decodedData], { type: fileData.type });
                 const file = new File([blob], fileData.name, { type: fileData.type });
                 await model.addFile(file);

frontend/app/store/wshclientapi.ts

@@ -112,6 +112,11 @@ class RpcApiType {
         return client.wshRpcCall("createsubblock", data, opts);
     }
 
+    // command "deleteappfile" [call]
+    DeleteAppFileCommand(client: WshClient, data: CommandDeleteAppFileData, opts?: RpcOpts): Promise<void> {
+        return client.wshRpcCall("deleteappfile", data, opts);
+    }
+
     // command "deleteblock" [call]
     DeleteBlockCommand(client: WshClient, data: CommandDeleteBlockData, opts?: RpcOpts): Promise<void> {
         return client.wshRpcCall("deleteblock", data, opts);
@@ -297,6 +302,16 @@ class RpcApiType {
         return client.wshRpcCall("getwaveairatelimit", null, opts);
     }
 
+    // command "listallappfiles" [call]
+    ListAllAppFilesCommand(client: WshClient, data: CommandListAllAppFilesData, opts?: RpcOpts): Promise<CommandListAllAppFilesRtnData> {
+        return client.wshRpcCall("listallappfiles", data, opts);
+    }
+
+    // command "listalleditableapps" [call]
+    ListAllEditableAppsCommand(client: WshClient, opts?: RpcOpts): Promise<string[]> {
+        return client.wshRpcCall("listalleditableapps", null, opts);
+    }
+
     // command "message" [call]
     MessageCommand(client: WshClient, data: CommandMessageData, opts?: RpcOpts): Promise<void> {
         return client.wshRpcCall("message", data, opts);
@@ -312,6 +327,11 @@ class RpcApiType {
         return client.wshRpcCall("path", data, opts);
     }
 
+    // command "readappfile" [call]
+    ReadAppFileCommand(client: WshClient, data: CommandReadAppFileData, opts?: RpcOpts): Promise<CommandReadAppFileRtnData> {
+        return client.wshRpcCall("readappfile", data, opts);
+    }
+
     // command "recordtevent" [call]
     RecordTEventCommand(client: WshClient, data: TEvent, opts?: RpcOpts): Promise<void> {
         return client.wshRpcCall("recordtevent", data, opts);
@@ -387,6 +407,11 @@ class RpcApiType {
         return client.wshRpcCall("remotewritefile", data, opts);
     }
 
+    // command "renameappfile" [call]
+    RenameAppFileCommand(client: WshClient, data: CommandRenameAppFileData, opts?: RpcOpts): Promise<void> {
+        return client.wshRpcCall("renameappfile", data, opts);
+    }
+
     // command "resolveids" [call]
     ResolveIdsCommand(client: WshClient, data: CommandResolveIdsData, opts?: RpcOpts): Promise<CommandResolveIdsRtnData> {
         return client.wshRpcCall("resolveids", data, opts);
@@ -517,6 +542,11 @@ class RpcApiType {
         return client.wshRpcCall("workspacelist", null, opts);
     }
 
+    // command "writeappfile" [call]
+    WriteAppFileCommand(client: WshClient, data: CommandWriteAppFileData, opts?: RpcOpts): Promise<void> {
+        return client.wshRpcCall("writeappfile", data, opts);
+    }
+
     // command "wshactivity" [call]
     WshActivityCommand(client: WshClient, data: {[key: string]: number}, opts?: RpcOpts): Promise<void> {
         return client.wshRpcCall("wshactivity", data, opts);

frontend/app/view/term/termwrap.ts

@@ -8,7 +8,7 @@ import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { WOS, atoms, fetchWaveFile, getSettingsKeyAtom, globalStore, openLink } from "@/store/global";
 import * as services from "@/store/services";
 import { PLATFORM, PlatformMacOS } from "@/util/platformutil";
-import { base64ToArray, fireAndForget } from "@/util/util";
+import { base64ToArray, base64ToString, fireAndForget } from "@/util/util";
 import { SearchAddon } from "@xterm/addon-search";
 import { SerializeAddon } from "@xterm/addon-serialize";
 import { WebLinksAddon } from "@xterm/addon-web-links";
@@ -259,7 +259,7 @@ function handleOsc16162Command(data: string, blockId: string, loaded: boolean, t
                     globalStore.set(termWrap.lastCommandAtom, rtInfo["shell:lastcmd"]);
                 } else {
                     try {
-                        const decodedCmd = atob(cmd.data.cmd64);
+                        const decodedCmd = base64ToString(cmd.data.cmd64);
                         rtInfo["shell:lastcmd"] = decodedCmd;
                         globalStore.set(termWrap.lastCommandAtom, decodedCmd);
                     } catch (e) {
@@ -364,9 +364,7 @@ export class TermWrap {
         this.hasResized = false;
         this.lastUpdated = Date.now();
         this.promptMarkers = [];
-        this.shellIntegrationStatusAtom = jotai.atom(null) as jotai.PrimitiveAtom<
-            "ready" | "running-command" | null
-        >;
+        this.shellIntegrationStatusAtom = jotai.atom(null) as jotai.PrimitiveAtom<"ready" | "running-command" | null>;
         this.lastCommandAtom = jotai.atom(null) as jotai.PrimitiveAtom<string | null>;
         this.terminal = new Terminal(options);
         this.fitAddon = new FitAddon();
@@ -460,25 +458,25 @@ export class TermWrap {
         }
         this.mainFileSubject = getFileSubject(this.blockId, TermFileName);
         this.mainFileSubject.subscribe(this.handleNewFileSubjectData.bind(this));
-        
+
         try {
             const rtInfo = await RpcApi.GetRTInfoCommand(TabRpcClient, {
                 oref: WOS.makeORef("block", this.blockId),
             });
-            
+
             if (rtInfo["shell:integration"]) {
                 const shellState = rtInfo["shell:state"] as ShellIntegrationStatus;
                 globalStore.set(this.shellIntegrationStatusAtom, shellState || null);
             } else {
                 globalStore.set(this.shellIntegrationStatusAtom, null);
             }
-            
+
             const lastCmd = rtInfo["shell:lastcmd"];
             globalStore.set(this.lastCommandAtom, lastCmd || null);
         } catch (e) {
             console.log("Error loading runtime info:", e);
         }
-        
+
         try {
             await this.loadInitialTerminalData();
         } finally {