feat: implement global text search widget and resolve block view suspense loading and directory tree preview issues

Author: tungnguyentu

electron.vite.config.ts

@@ -4,70 +4,24 @@
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "electron-vite";
+import path from "path";
 import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
 import svgr from "vite-plugin-svgr";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 // from our electron build
 const CHROME = "chrome140";
 const NODE = "node22";
+const MERMAID_CORE = path.resolve(__dirname, "node_modules/mermaid/dist/mermaid.core.mjs");
 
-// for debugging
-// target is like -- path.resolve(__dirname, "frontend/app/workspace/workspace-layout-model.ts");
-function whoImportsTarget(target: string) {
+function streamdownMermaidFix() {
     return {
-        name: "who-imports-target",
-        buildEnd() {
-            // Build reverse graph: child -> [importers...]
-            const parents = new Map<string, string[]>();
-            for (const id of (this as any).getModuleIds()) {
-                const info = (this as any).getModuleInfo(id);
-                if (!info) continue;
-                for (const child of [...info.importedIds, ...info.dynamicallyImportedIds]) {
-                    const arr = parents.get(child) ?? [];
-                    arr.push(id);
-                    parents.set(child, arr);
-                }
-            }
-
-            // Walk upward from TARGET and print paths to entries
-            const entries = [...parents.keys()].filter((id) => {
-                const m = (this as any).getModuleInfo(id);
-                return m?.isEntry;
-            });
-
-            const seen = new Set<string>();
-            const stack: string[] = [];
-            const dfs = (node: string) => {
-                if (seen.has(node)) return;
-                seen.add(node);
-                stack.push(node);
-                const ps = parents.get(node) || [];
-                if (ps.length === 0) {
-                    // hit a root (likely main entry or plugin virtual)
-                    console.log("\nImporter chain:");
-                    stack
-                        .slice()
-                        .reverse()
-                        .forEach((s) => console.log("  ↳", s));
-                } else {
-                    for (const p of ps) dfs(p);
-                }
-                stack.pop();
-            };
-
-            if (!parents.has(target)) {
-                console.log(`[who-imports] TARGET not in MAIN graph: ${target}`);
-            } else {
-                dfs(target);
-            }
-        },
-        async resolveId(id: any, importer: any) {
-            const r = await (this as any).resolve(id, importer, { skipSelf: true });
-            if (r?.id === target) {
-                console.log(`[resolve] ${importer} -> ${id} -> ${r.id}`);
-            }
-            return null;
+        name: "streamdown-mermaid-fix",
+        enforce: "pre" as const,
+        transform(code: string, id: string) {
+            if (!id.includes("node_modules/streamdown")) return null;
+            if (!code.includes("import('mermaid')")) return null;
+            return code.replaceAll("import('mermaid')", `import('/@fs${MERMAID_CORE}')`);
         },
     };
 }
@@ -89,6 +43,7 @@ export default defineConfig({
         resolve: {
             alias: {
                 "@": "frontend",
+                mermaid: path.resolve(__dirname, "node_modules/mermaid/dist/mermaid.js"),
             },
         },
         server: {
@@ -147,8 +102,25 @@ export default defineConfig({
                 },
             },
         },
+        resolve: {
+            alias: {
+                "style-to-js$": path.resolve(__dirname, "frontend/style-to-js-compat.ts"),
+                "extend$": path.resolve(__dirname, "frontend/extend-compat.ts"),
+            },
+        },
         optimizeDeps: {
-            include: ["monaco-yaml/yaml.worker.js"],
+            include: [
+                "monaco-yaml/yaml.worker.js",
+                "style-to-js",
+                "style-to-object",
+                "react-markdown",
+                "rehype-raw",
+                "rehype-sanitize",
+                "hast-util-to-estree",
+                "hast-util-to-jsx-runtime",
+                "extend"
+            ],
+            exclude: ["mermaid", "streamdown"],
         },
         server: {
             open: false,
@@ -176,6 +148,7 @@ export default defineConfig({
         },
         plugins: [
             tsconfigPaths(),
+            streamdownMermaidFix(),
             { ...ViteImageOptimizer(), apply: "build" },
             svgr({
                 svgrOptions: { exportType: "default", ref: true, svgo: false, titleProp: true },

frontend/app/block/block.tsx

@@ -273,17 +273,22 @@ const BlockInner = memo((props: BlockProps & { viewType: string }) => {
     const waveEnv = useWaveEnv();
     const bcm = getBlockComponentModel(props.nodeModel.blockId);
     let viewModel = bcm?.viewModel;
-    if (viewModel == null) {
-        // viewModel gets the full waveEnv
+    if (viewModel == null || viewModel.viewType !== props.viewType) {
+        if (viewModel != null) {
+            viewModel.dispose?.();
+        }
         viewModel = makeViewModel(props.nodeModel.blockId, props.viewType, props.nodeModel, tabModel, waveEnv);
         registerBlockComponentModel(props.nodeModel.blockId, { viewModel });
     }
     useEffect(() => {
         return () => {
-            unregisterBlockComponentModel(props.nodeModel.blockId);
+            const currentBcm = getBlockComponentModel(props.nodeModel.blockId);
+            if (currentBcm?.viewModel === viewModel) {
+                unregisterBlockComponentModel(props.nodeModel.blockId);
+            }
             viewModel?.dispose?.();
         };
-    }, []);
+    }, [viewModel]);
     if (props.preview) {
         return <BlockPreview {...props} viewModel={viewModel} />;
     }
@@ -308,17 +313,22 @@ const SubBlockInner = memo((props: SubBlockProps & { viewType: string }) => {
     const waveEnv = useWaveEnv();
     const bcm = getBlockComponentModel(props.nodeModel.blockId);
     let viewModel = bcm?.viewModel;
-    if (viewModel == null) {
-        // viewModel gets the full waveEnv
+    if (viewModel == null || viewModel.viewType !== props.viewType) {
+        if (viewModel != null) {
+            viewModel.dispose?.();
+        }
         viewModel = makeViewModel(props.nodeModel.blockId, props.viewType, props.nodeModel, tabModel, waveEnv);
         registerBlockComponentModel(props.nodeModel.blockId, { viewModel });
     }
     useEffect(() => {
         return () => {
-            unregisterBlockComponentModel(props.nodeModel.blockId);
+            const currentBcm = getBlockComponentModel(props.nodeModel.blockId);
+            if (currentBcm?.viewModel === viewModel) {
+                unregisterBlockComponentModel(props.nodeModel.blockId);
+            }
             viewModel?.dispose?.();
         };
-    }, []);
+    }, [viewModel]);
     return <BlockSubBlock {...props} viewModel={viewModel} />;
 });
 SubBlockInner.displayName = "SubBlockInner";

frontend/app/block/blockregistry.ts

@@ -7,6 +7,7 @@ import { AiFileDiffViewModel } from "@/app/view/aifilediff/aifilediff";
 import { LauncherViewModel } from "@/app/view/launcher/launcher";
 import { PreviewModel } from "@/app/view/preview/preview-model";
 import { ProcessViewerViewModel } from "@/app/view/processviewer/processviewer";
+import { SearchViewModel } from "@/app/view/search/search";
 import { SysinfoViewModel } from "@/app/view/sysinfo/sysinfo";
 import { TsunamiViewModel } from "@/app/view/tsunami/tsunami";
 import { VDomModel } from "@/app/view/vdom/vdom-model";
@@ -35,6 +36,7 @@ BlockRegistry.set("tsunami", TsunamiViewModel);
 BlockRegistry.set("aifilediff", AiFileDiffViewModel);
 BlockRegistry.set("waveconfig", WaveConfigViewModel);
 BlockRegistry.set("processviewer", ProcessViewerViewModel);
+BlockRegistry.set("search", SearchViewModel);
 
 function makeDefaultViewModel(viewType: string): ViewModel {
     const viewModel: ViewModel = {

frontend/app/block/blockutil.tsx

@@ -45,6 +45,9 @@ export function blockViewToIcon(view: string): string {
     if (view == "processviewer") {
         return "microchip";
     }
+    if (view == "search") {
+        return "search";
+    }
     return "square";
 }
 
@@ -73,6 +76,9 @@ export function blockViewToName(view: string): string {
     if (view == "processviewer") {
         return "Processes";
     }
+    if (view == "search") {
+        return "Search";
+    }
     return view;
 }
 

frontend/app/element/markdown.tsx

@@ -10,7 +10,7 @@ import {
     transformBlocks,
 } from "@/app/element/markdown-util";
 import remarkMermaidToTag from "@/app/element/remark-mermaid-to-tag";
-import { boundNumber, useAtomValueSafe, cn } from "@/util/util";
+import { boundNumber, cn, useAtomValueSafe } from "@/util/util";
 import clsx from "clsx";
 import { Atom } from "jotai";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
@@ -31,7 +31,7 @@ let mermaidInstance: any = null;
 
 const initializeMermaid = async () => {
     if (!mermaidInitialized) {
-        const mermaid = await import("mermaid");
+        const mermaid = await import("mermaid/dist/mermaid.js");
         mermaidInstance = mermaid.default;
         mermaidInstance.initialize({ startOnLoad: false, theme: "dark", securityLevel: "strict" });
         mermaidInitialized = true;

frontend/app/store/keymodel.ts

@@ -24,6 +24,7 @@ import { getActiveTabModel } from "@/app/store/tab-model";
 import { WorkspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
 import { deleteLayoutModelForTab, getLayoutModelForStaticTab, NavigateDirection } from "@/layout/index";
 import * as keyutil from "@/util/keyutil";
+import { focusedBlockId } from "@/util/focusutil";
 import { isWindows } from "@/util/platformutil";
 import { CHORD_TIMEOUT } from "@/util/sharedconst";
 import { fireAndForget } from "@/util/util";
@@ -452,7 +453,11 @@ function appHandleKeyDown(waveEvent: WaveKeyboardEvent): boolean {
     if (isTabWindow()) {
         const layoutModel = getLayoutModelForStaticTab();
         const focusedNode = globalStore.get(layoutModel.focusedNode);
-        const blockId = focusedNode?.data?.blockId;
+        let blockId = focusedNode?.data?.blockId;
+        const domFocusedId = focusedBlockId();
+        if (domFocusedId) {
+            blockId = domFocusedId;
+        }
         if (blockId != null && shouldDispatchToBlock(waveEvent)) {
             const bcm = getBlockComponentModel(blockId);
             const viewModel = bcm?.viewModel;

frontend/app/store/wshclientapi.ts

@@ -372,6 +372,12 @@ export class RpcApiType {
         return client.wshRpcCall("filerestorebackup", data, opts);
     }
 
+    // command "filesearch" [call]
+    FileSearchCommand(client: WshClient, data: CommandFileSearchData, opts?: RpcOpts): Promise<FileSearchResult[]> {
+        if (this.mockClient) return this.mockClient.mockWshRpcCall(client, "filesearch", data, opts);
+        return client.wshRpcCall("filesearch", data, opts);
+    }
+
     // command "filestream" [call]
     FileStreamCommand(client: WshClient, data: CommandFileStreamData, opts?: RpcOpts): Promise<FileInfo> {
         if (this.mockClient) return this.mockClient.mockWshRpcCall(client, "filestream", data, opts);
@@ -720,6 +726,12 @@ export class RpcApiType {
         return client.wshRpcCall("remotefilemultiinfo", data, opts);
     }
 
+    // command "remotefilesearch" [call]
+    RemoteFileSearchCommand(client: WshClient, data: CommandFileSearchData, opts?: RpcOpts): Promise<FileSearchResult[]> {
+        if (this.mockClient) return this.mockClient.mockWshRpcCall(client, "remotefilesearch", data, opts);
+        return client.wshRpcCall("remotefilesearch", data, opts);
+    }
+
     // command "remotefilestream" [call]
     RemoteFileStreamCommand(client: WshClient, data: CommandRemoteFileStreamData, opts?: RpcOpts): Promise<FileInfo> {
         if (this.mockClient) return this.mockClient.mockWshRpcCall(client, "remotefilestream", data, opts);