add workspace directory feature

- Add directory field to workspace model with validation
- New terminal shells use workspace directory as initial cwd for local connections
- Preview blocks default to workspace directory when no file is set
- Workspace editor UI with directory input and folder browse dialog
- When directory changes, update all local terminal and preview blocks
- Add shellQuote utility for safe shell command injection prevention
- Export WAVETERM_WORKSPACE_DIR environment variable in shell sessions
- Add tests for workspace directory validation and shell quoting

Author: rnunley-nmg

emain/emain-ipc.ts

@@ -258,6 +258,21 @@ export function initIpcHandlers() {
         event.returnValue = getWaveVersion() as AboutModalDetails;
     });
 
+    electron.ipcMain.handle("show-open-folder-dialog", async () => {
+        const ww = focusedWaveWindow;
+        if (ww == null) {
+            return null;
+        }
+        const result = await electron.dialog.showOpenDialog(ww, {
+            title: "Select Workspace Directory",
+            properties: ["openDirectory", "createDirectory"],
+        });
+        if (result.canceled || result.filePaths.length === 0) {
+            return null;
+        }
+        return result.filePaths[0];
+    });
+
     electron.ipcMain.on("get-zoom-factor", (event) => {
         event.returnValue = event.sender.getZoomFactor();
     });

emain/preload.ts

@@ -68,6 +68,7 @@ contextBridge.exposeInMainWorld("api", {
     openBuilder: (appId?: string) => ipcRenderer.send("open-builder", appId),
     setBuilderWindowAppId: (appId: string) => ipcRenderer.send("set-builder-window-appid", appId),
     doRefresh: () => ipcRenderer.send("do-refresh"),
+    showOpenFolderDialog: () => ipcRenderer.invoke("show-open-folder-dialog"),
 });
 
 // Custom event for "new-window"

frontend/app/store/services.ts

@@ -182,7 +182,7 @@ class WorkspaceServiceType {
     }
 
     // @returns object updates
-    UpdateWorkspace(workspaceId: string, name: string, icon: string, color: string, applyDefaults: boolean): Promise<void> {
+    UpdateWorkspace(workspaceId: string, name: string, icon: string, color: string, directory: string, applyDefaults: boolean): Promise<void> {
         return WOS.callBackendService("workspace", "UpdateWorkspace", Array.from(arguments))
     }
 }

frontend/app/tab/workspaceeditor.scss

@@ -61,6 +61,33 @@
         }
     }
 
+    .directory-selector {
+        margin-top: 15px;
+        padding-top: 15px;
+        border-top: 1px solid var(--modal-border-color);
+
+        .directory-label {
+            display: block;
+            font-size: 12px;
+            color: var(--secondary-text-color);
+            margin-bottom: 5px;
+        }
+
+        .directory-input-row {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+
+            .directory-input {
+                flex: 1;
+            }
+
+            .browse-btn {
+                flex-shrink: 0;
+            }
+        }
+    }
+
     .delete-ws-btn-wrapper {
         display: flex;
         align-items: center;

frontend/app/tab/workspaceeditor.tsx

@@ -1,3 +1,4 @@
+import { getApi } from "@/app/store/global";
 import { fireAndForget, makeIconClass } from "@/util/util";
 import clsx from "clsx";
 import { memo, useEffect, useRef, useState } from "react";
@@ -13,19 +14,20 @@ interface ColorSelectorProps {
     className?: string;
 }
 
-const ColorSelector = memo(({ colors, selectedColor, onSelect, className }: ColorSelectorProps) => {
-    const handleColorClick = (color: string) => {
-        onSelect(color);
-    };
-
+const ColorSelector = memo(function ColorSelector({
+    colors,
+    selectedColor,
+    onSelect,
+    className,
+}: ColorSelectorProps) {
     return (
         <div className={clsx("color-selector", className)}>
             {colors.map((color) => (
                 <div
                     key={color}
                     className={clsx("color-circle", { selected: selectedColor === color })}
                     style={{ backgroundColor: color }}
-                    onClick={() => handleColorClick(color)}
+                    onClick={() => onSelect(color)}
                 />
             ))}
         </div>
@@ -39,11 +41,12 @@ interface IconSelectorProps {
     className?: string;
 }
 
-const IconSelector = memo(({ icons, selectedIcon, onSelect, className }: IconSelectorProps) => {
-    const handleIconClick = (icon: string) => {
-        onSelect(icon);
-    };
-
+const IconSelector = memo(function IconSelector({
+    icons,
+    selectedIcon,
+    onSelect,
+    className,
+}: IconSelectorProps) {
     return (
         <div className={clsx("icon-selector", className)}>
             {icons.map((icon) => {
@@ -52,7 +55,7 @@ const IconSelector = memo(({ icons, selectedIcon, onSelect, className }: IconSel
                     <i
                         key={icon}
                         className={clsx(iconClass, "icon-item", { selected: selectedIcon === icon })}
-                        onClick={() => handleIconClick(icon)}
+                        onClick={() => onSelect(icon)}
                     />
                 );
             })}
@@ -64,33 +67,37 @@ interface WorkspaceEditorProps {
     title: string;
     icon: string;
     color: string;
+    directory: string;
     focusInput: boolean;
     onTitleChange: (newTitle: string) => void;
     onColorChange: (newColor: string) => void;
     onIconChange: (newIcon: string) => void;
+    onDirectoryChange: (newDirectory: string) => void;
     onDeleteWorkspace: () => void;
 }
-const WorkspaceEditorComponent = ({
+export const WorkspaceEditor = memo(function WorkspaceEditor({
     title,
     icon,
     color,
+    directory,
     focusInput,
     onTitleChange,
     onColorChange,
     onIconChange,
+    onDirectoryChange,
     onDeleteWorkspace,
-}: WorkspaceEditorProps) => {
+}: WorkspaceEditorProps) {
     const inputRef = useRef<HTMLInputElement>(null);
 
     const [colors, setColors] = useState<string[]>([]);
     const [icons, setIcons] = useState<string[]>([]);
 
     useEffect(() => {
         fireAndForget(async () => {
-            const colors = await WorkspaceService.GetColors();
-            const icons = await WorkspaceService.GetIcons();
-            setColors(colors);
-            setIcons(icons);
+            const fetchedColors = await WorkspaceService.GetColors();
+            const fetchedIcons = await WorkspaceService.GetIcons();
+            setColors(fetchedColors);
+            setIcons(fetchedIcons);
         });
     }, []);
 
@@ -113,13 +120,37 @@ const WorkspaceEditorComponent = ({
             />
             <ColorSelector selectedColor={color} colors={colors} onSelect={onColorChange} />
             <IconSelector selectedIcon={icon} icons={icons} onSelect={onIconChange} />
+            <div className="directory-selector">
+                <label className="directory-label">Directory</label>
+                <div className="directory-input-row">
+                    <Input
+                        value={directory}
+                        onChange={onDirectoryChange}
+                        placeholder="~/projects/myworkspace"
+                        className="directory-input"
+                    />
+                    <Button
+                        className="ghost browse-btn"
+                        onClick={async () => {
+                            try {
+                                const path = await getApi().showOpenFolderDialog();
+                                if (path) {
+                                    onDirectoryChange(path);
+                                }
+                            } catch (e) {
+                                console.error("error opening folder dialog:", e);
+                            }
+                        }}
+                    >
+                        Browse
+                    </Button>
+                </div>
+            </div>
             <div className="delete-ws-btn-wrapper">
                 <Button className="ghost red text-[12px] bold" onClick={onDeleteWorkspace}>
                     Delete workspace
                 </Button>
             </div>
         </div>
     );
-};
-
-export const WorkspaceEditor = memo(WorkspaceEditorComponent) as typeof WorkspaceEditorComponent;
+});

frontend/app/tab/workspaceswitcher.tsx

@@ -10,15 +10,18 @@ import {
     ExpandableMenuItemRightElement,
 } from "@/element/expandablemenu";
 import { Popover, PopoverButton, PopoverContent } from "@/element/popover";
-import { fireAndForget, makeIconClass, useAtomValueSafe } from "@/util/util";
+import { RpcApi } from "@/app/store/wshclientapi";
+import { TabRpcClient } from "@/app/store/wshrpcutil";
+import { fireAndForget, makeIconClass, shellQuote, stringToBase64, useAtomValueSafe } from "@/util/util";
 import clsx from "clsx";
-import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { Atom, atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { splitAtom } from "jotai/utils";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
-import { CSSProperties, forwardRef, useCallback, useEffect } from "react";
+import { CSSProperties, forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { debounce } from "throttle-debounce";
 import WorkspaceSVG from "../asset/workspace.svg";
 import { IconButton } from "../element/iconbutton";
-import { atoms, getApi } from "../store/global";
+import { atoms, getAllBlockComponentModels, getApi, globalStore } from "../store/global";
 import { WorkspaceService } from "../store/services";
 import { getObjectValue, makeORef } from "../store/wos";
 import { waveEventSubscribe } from "../store/wps";
@@ -84,7 +87,7 @@ const WorkspaceSwitcher = forwardRef<HTMLDivElement>((_, ref) => {
 
     const saveWorkspace = () => {
         fireAndForget(async () => {
-            await WorkspaceService.UpdateWorkspace(activeWorkspace.oid, "", "", "", true);
+            await WorkspaceService.UpdateWorkspace(activeWorkspace.oid, "", "", "", "", true);
             await updateWorkspaceList();
             setEditingWorkspace(activeWorkspace.oid);
         });
@@ -138,6 +141,60 @@ const WorkspaceSwitcher = forwardRef<HTMLDivElement>((_, ref) => {
     );
 });
 
+interface BlockAwareViewModel extends ViewModel {
+    blockId: string;
+    blockAtom: Atom<Block>;
+}
+
+interface PreviewViewModel extends BlockAwareViewModel {
+    goHistory: (path: string) => Promise<void>;
+}
+
+/**
+ * Type guard that checks if a ViewModel has block awareness (blockId and blockAtom properties).
+ */
+function isBlockAwareViewModel(viewModel: ViewModel): viewModel is BlockAwareViewModel {
+    return "blockId" in viewModel && "blockAtom" in viewModel;
+}
+
+/**
+ * Type guard that checks if a ViewModel is a preview view with navigation capabilities.
+ */
+function isPreviewViewModel(viewModel: ViewModel): viewModel is PreviewViewModel {
+    return viewModel.viewType === "preview" && isBlockAwareViewModel(viewModel) && "goHistory" in viewModel;
+}
+
+/**
+ * Updates all local blocks to use a new workspace directory.
+ * For preview blocks, navigates to the new directory.
+ * For terminal blocks, sends a cd command to change to the new directory.
+ * Skips blocks that have a remote connection.
+ */
+async function updateBlocksWithNewDirectory(newDirectory: string): Promise<void> {
+    const allModels = getAllBlockComponentModels();
+    for (const model of allModels) {
+        if (model?.viewModel == null) {
+            continue;
+        }
+        const viewModel = model.viewModel;
+        if (!isBlockAwareViewModel(viewModel)) {
+            continue;
+        }
+        const blockData = globalStore.get(viewModel.blockAtom);
+        if (blockData?.meta?.connection) {
+            continue;
+        }
+        if (isPreviewViewModel(viewModel)) {
+            await viewModel.goHistory(newDirectory);
+        } else if (viewModel.viewType === "term") {
+            RpcApi.ControllerInputCommand(TabRpcClient, {
+                blockid: viewModel.blockId,
+                inputdata64: stringToBase64(`cd ${shellQuote(newDirectory)}\n`),
+            });
+        }
+    }
+}
+
 const WorkspaceSwitcherItem = ({
     entryAtom,
     onDeleteWorkspace,
@@ -152,20 +209,47 @@ const WorkspaceSwitcherItem = ({
     const workspace = workspaceEntry.workspace;
     const isCurrentWorkspace = activeWorkspace.oid === workspace.oid;
 
-    const setWorkspace = useCallback((newWorkspace: Workspace) => {
-        setWorkspaceEntry({ ...workspaceEntry, workspace: newWorkspace });
-        if (newWorkspace.name != "") {
-            fireAndForget(() =>
-                WorkspaceService.UpdateWorkspace(
-                    workspace.oid,
-                    newWorkspace.name,
-                    newWorkspace.icon,
-                    newWorkspace.color,
-                    false
-                )
-            );
-        }
-    }, []);
+    const pendingDirectoryRef = useRef<string | null>(null);
+
+    const debouncedBlockUpdate = useMemo(
+        () =>
+            debounce(300, (newDirectory: string) => {
+                pendingDirectoryRef.current = null;
+                fireAndForget(async () => {
+                    await updateBlocksWithNewDirectory(newDirectory);
+                });
+            }),
+        []
+    );
+
+    const setWorkspace = useCallback(
+        (newWorkspace: Workspace) => {
+            setWorkspaceEntry((prev) => {
+                const oldDirectory = prev.workspace.directory;
+                const newDirectory = newWorkspace.directory;
+                const directoryChanged = newDirectory !== oldDirectory;
+
+                if (newWorkspace.name !== "") {
+                    fireAndForget(async () => {
+                        await WorkspaceService.UpdateWorkspace(
+                            prev.workspace.oid,
+                            newWorkspace.name,
+                            newWorkspace.icon,
+                            newWorkspace.color,
+                            newWorkspace.directory ?? "",
+                            false
+                        );
+                    });
+                    if (directoryChanged && isCurrentWorkspace && newDirectory) {
+                        pendingDirectoryRef.current = newDirectory;
+                        debouncedBlockUpdate(newDirectory);
+                    }
+                }
+                return { ...prev, workspace: newWorkspace };
+            });
+        },
+        [debouncedBlockUpdate, isCurrentWorkspace, setWorkspaceEntry]
+    );
 
     const isActive = !!workspaceEntry.windowId;
     const editIconDecl: IconButtonDecl = {
@@ -233,10 +317,12 @@ const WorkspaceSwitcherItem = ({
                     title={workspace.name}
                     icon={workspace.icon}
                     color={workspace.color}
+                    directory={workspace.directory ?? ""}
                     focusInput={isEditing}
                     onTitleChange={(title) => setWorkspace({ ...workspace, name: title })}
                     onColorChange={(color) => setWorkspace({ ...workspace, color })}
                     onIconChange={(icon) => setWorkspace({ ...workspace, icon })}
+                    onDirectoryChange={(directory) => setWorkspace({ ...workspace, directory })}
                     onDeleteWorkspace={() => onDeleteWorkspace(workspace.oid)}
                 />
             </ExpandableMenuItem>