UX Improvements: Folder-based tab titles, scroll enhancements, and file preview features

emain/emain-platform.ts

@@ -10,12 +10,6 @@ import path from "path";
 import { WaveDevVarName, WaveDevViteVarName } from "../frontend/util/isdev";
 import * as keyutil from "../frontend/util/keyutil";
 
-// This is a little trick to ensure that Electron puts all its runtime data into a subdirectory to avoid conflicts with our own data.
-// On macOS, it will store to ~/Library/Application \Support/waveterm/electron
-// On Linux, it will store to ~/.config/waveterm/electron
-// On Windows, it will store to %LOCALAPPDATA%/waveterm/electron
-app.setName("waveterm/electron");
-
 const isDev = !app.isPackaged;
 const isDevVite = isDev && process.env.ELECTRON_RENDERER_URL;
 console.log(`Running in ${isDev ? "development" : "production"} mode`);
@@ -32,7 +26,12 @@ const waveDirName = `${waveDirNamePrefix}${waveDirNameSuffix ? `-${waveDirNameSu
 
 const paths = envPaths("waveterm", { suffix: waveDirNameSuffix });
 
+// Set the proper display name first
 app.setName(isDev ? "Wave (Dev)" : "Wave");
+
+// Note: We previously used app.setName("waveterm/electron") here to organize Electron's runtime data,
+// but this caused "Electron" to appear in the macOS menu bar. The envPaths configuration above
+// already handles the data directory organization, so the setName trick is not needed.
 const unamePlatform = process.platform;
 const unameArch: string = process.arch;
 keyutil.setKeyUtilPlatform(unamePlatform);

emain/preload.ts

@@ -1,7 +1,7 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { contextBridge, ipcRenderer, Rectangle, WebviewTag } from "electron";
+import { contextBridge, ipcRenderer, Rectangle, webUtils, WebviewTag } from "electron";
 
 // update type in custom.d.ts (ElectronApi type)
 contextBridge.exposeInMainWorld("api", {
@@ -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"),
+    getPathForFile: (file: File) => webUtils.getPathForFile(file),
 });
 
 // Custom event for "new-window"

frontend/app/aipanel/aipanelmessages.tsx

@@ -8,6 +8,9 @@ import { AIModeDropdown } from "./aimode";
 import { type WaveUIMessage } from "./aitypes";
 import { WaveAIModel } from "./waveai-model";
 
+const AUTO_SCROLL_DEBOUNCE_MS = 100;
+const SCROLL_BOTTOM_THRESHOLD_PX = 50;
+
 interface AIPanelMessagesProps {
     messages: WaveUIMessage[];
     status: string;
@@ -20,25 +23,59 @@ export const AIPanelMessages = memo(({ messages, status, onContextMenu }: AIPane
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const messagesContainerRef = useRef<HTMLDivElement>(null);
     const prevStatusRef = useRef<string>(status);
+    const userHasScrolledUp = useRef<boolean>(false);
+    const isAutoScrolling = useRef<boolean>(false);
 
     const scrollToBottom = () => {
         const container = messagesContainerRef.current;
         if (container) {
+            isAutoScrolling.current = true;
             container.scrollTop = container.scrollHeight;
             container.scrollLeft = 0;
+            userHasScrolledUp.current = false;
+            setTimeout(() => {
+                isAutoScrolling.current = false;
+            }, AUTO_SCROLL_DEBOUNCE_MS);
         }
     };
 
+    // Detect if user has manually scrolled up
+    useEffect(() => {
+        const container = messagesContainerRef.current;
+        if (!container) return;
+
+        const handleScroll = () => {
+            // Ignore scroll events triggered by our auto-scroll
+            if (isAutoScrolling.current) return;
+
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+
+            // If user is more than threshold from the bottom, they've scrolled up
+            if (distanceFromBottom > SCROLL_BOTTOM_THRESHOLD_PX) {
+                userHasScrolledUp.current = true;
+            } else {
+                userHasScrolledUp.current = false;
+            }
+        };
+
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        return () => container.removeEventListener("scroll", handleScroll);
+    }, []);
+
     useEffect(() => {
         model.registerScrollToBottom(scrollToBottom);
     }, [model]);
 
     useEffect(() => {
-        scrollToBottom();
+        // Only auto-scroll if user hasn't manually scrolled up
+        if (!userHasScrolledUp.current) {
+            scrollToBottom();
+        }
     }, [messages]);
 
     useEffect(() => {
-        if (isPanelOpen) {
+        if (isPanelOpen && !userHasScrolledUp.current) {
             scrollToBottom();
         }
     }, [isPanelOpen]);
@@ -47,7 +84,7 @@ export const AIPanelMessages = memo(({ messages, status, onContextMenu }: AIPane
         const wasStreaming = prevStatusRef.current === "streaming";
         const isNowNotStreaming = status !== "streaming";
 
-        if (wasStreaming && isNowNotStreaming) {
+        if (wasStreaming && isNowNotStreaming && !userHasScrolledUp.current) {
             requestAnimationFrame(() => {
                 scrollToBottom();
             });

frontend/app/modals/confirmclosetab.tsx

@@ -0,0 +1,39 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Modal } from "@/app/modals/modal";
+import { deleteLayoutModelForTab } from "@/layout/index";
+import { atoms, getApi, globalStore } from "@/store/global";
+import { modalsModel } from "@/store/modalmodel";
+
+interface ConfirmCloseTabModalProps {
+    tabId: string;
+}
+
+const ConfirmCloseTabModal = ({ tabId }: ConfirmCloseTabModalProps) => {
+    const handleConfirmClose = () => {
+        const ws = globalStore.get(atoms.workspace);
+        getApi().closeTab(ws.oid, tabId);
+        deleteLayoutModelForTab(tabId);
+        modalsModel.popModal();
+    };
+
+    const handleCancel = () => {
+        modalsModel.popModal();
+    };
+
+    return (
+        <Modal onOk={handleConfirmClose} onCancel={handleCancel} onClose={handleCancel}>
+            <div className="content">
+                <div className="modal-title">Close Tab?</div>
+                <div style={{ marginTop: "10px" }}>
+                    Are you sure you want to close this tab? This action cannot be undone.
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+ConfirmCloseTabModal.displayName = "ConfirmCloseTabModal";
+
+export { ConfirmCloseTabModal };

frontend/app/modals/modalregistry.tsx

@@ -7,6 +7,7 @@ import { UpgradeOnboardingModal } from "@/app/onboarding/onboarding-upgrade";
 import { DeleteFileModal, PublishAppModal, RenameFileModal } from "@/builder/builder-apppanel";
 import { SetSecretDialog } from "@/builder/tabs/builder-secrettab";
 import { AboutModal } from "./about";
+import { ConfirmCloseTabModal } from "./confirmclosetab";
 import { UserInputModal } from "./userinputmodal";
 
 const modalRegistry: { [key: string]: React.ComponentType<any> } = {
@@ -15,6 +16,7 @@ const modalRegistry: { [key: string]: React.ComponentType<any> } = {
     [UserInputModal.displayName || "UserInputModal"]: UserInputModal,
     [AboutModal.displayName || "AboutModal"]: AboutModal,
     [MessageModal.displayName || "MessageModal"]: MessageModal,
+    [ConfirmCloseTabModal.displayName || "ConfirmCloseTabModal"]: ConfirmCloseTabModal,
     [PublishAppModal.displayName || "PublishAppModal"]: PublishAppModal,
     [RenameFileModal.displayName || "RenameFileModal"]: RenameFileModal,
     [DeleteFileModal.displayName || "DeleteFileModal"]: DeleteFileModal,

frontend/app/store/wshclientapi.ts

@@ -292,6 +292,11 @@ class RpcApiType {
         return client.wshRpcCall("focuswindow", data, opts);
     }
 
+    // command "generatetabtitle" [call]
+    GenerateTabTitleCommand(client: WshClient, data: string, opts?: RpcOpts): Promise<string> {
+        return client.wshRpcCall("generatetabtitle", data, opts);
+    }
+
     // command "getbuilderoutput" [call]
     GetBuilderOutputCommand(client: WshClient, data: string, opts?: RpcOpts): Promise<string[]> {
         return client.wshRpcCall("getbuilderoutput", data, opts);

frontend/app/tab/tabbar.tsx

@@ -620,10 +620,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
 
     const handleCloseTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, tabId: string) => {
         event?.stopPropagation();
-        const ws = globalStore.get(atoms.workspace);
-        getApi().closeTab(ws.oid, tabId);
-        tabsWrapperRef.current.style.setProperty("--tabs-wrapper-transition", "width 0.3s ease");
-        deleteLayoutModelForTab(tabId);
+
+        // Show confirmation modal before closing
+        modalsModel.pushModal("ConfirmCloseTabModal", { tabId });
     };
 
     const handlePinChange = useCallback(
@@ -698,7 +697,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                     <i className="fa fa-ellipsis" />
                 </div>
             )}
-            <WaveAIButton />
             <WorkspaceSwitcher ref={workspaceSwitcherRef} />
             <div className="tab-bar" ref={tabBarRef} data-overlayscrollbars-initialize>
                 <div className="tabs-wrapper" ref={tabsWrapperRef} style={{ width: `${tabsWrapperWidth}px` }}>

frontend/app/view/preview/preview-edit.tsx

@@ -63,9 +63,13 @@ function CodeEditPreview({ model }: SpecializedViewProps) {
 
     useEffect(() => {
         model.codeEditKeyDownHandler = codeEditKeyDownHandler;
+        model.refreshCallback = () => {
+            globalStore.set(model.refreshVersion, (v) => v + 1);
+        };
         return () => {
             model.codeEditKeyDownHandler = null;
             model.monacoRef.current = null;
+            model.refreshCallback = null;
         };
     }, []);
 

frontend/app/view/preview/preview-markdown.tsx

@@ -2,12 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Markdown } from "@/element/markdown";
-import { getOverrideConfigAtom } from "@/store/global";
+import { getOverrideConfigAtom, globalStore } from "@/store/global";
 import { useAtomValue } from "jotai";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import type { SpecializedViewProps } from "./preview";
 
 function MarkdownPreview({ model }: SpecializedViewProps) {
+    useEffect(() => {
+        model.refreshCallback = () => {
+            globalStore.set(model.refreshVersion, (v) => v + 1);
+        };
+        return () => {
+            model.refreshCallback = null;
+        };
+    }, []);
     const connName = useAtomValue(model.connection);
     const fileInfo = useAtomValue(model.statFile);
     const fontSizeOverride = useAtomValue(getOverrideConfigAtom(model.blockId, "markdown:fontsize"));

frontend/app/view/preview/preview-model.tsx

@@ -350,13 +350,35 @@ export class PreviewModel implements ViewModel {
                         title: "Table of Contents",
                         click: () => this.markdownShowTocToggle(),
                     },
+                    {
+                        elemtype: "iconbutton",
+                        icon: "arrows-rotate",
+                        title: "Refresh",
+                        click: () => this.refreshCallback?.(),
+                    },
+                ] as IconButtonDecl[];
+            } else if (!isCeView && mimeType) {
+                // For all other file types (text, code, etc.), add refresh button
+                return [
+                    {
+                        elemtype: "iconbutton",
+                        icon: "arrows-rotate",
+                        title: "Refresh",
+                        click: () => this.refreshCallback?.(),
+                    },
                 ] as IconButtonDecl[];
             }
             return null;
         });
         this.metaFilePath = atom<string>((get) => {
-            const file = get(this.blockAtom)?.meta?.file;
+            const blockData = get(this.blockAtom);
+            const file = blockData?.meta?.file;
             if (isBlank(file)) {
+                // If no file is set, default to the terminal's current working directory
+                const cwd = blockData?.meta?.[waveobj.MetaKey_CmdCwd];
+                if (!isBlank(cwd)) {
+                    return cwd;
+                }
                 return "~";
             }
             return file;
@@ -408,6 +430,7 @@ export class PreviewModel implements ViewModel {
         this.goParentDirectory = this.goParentDirectory.bind(this);
 
         const fullFileAtom = atom<Promise<FileData>>(async (get) => {
+            get(this.refreshVersion); // Subscribe to refreshVersion to trigger re-fetch
             const fileName = get(this.metaFilePath);
             const path = await this.formatRemoteUri(fileName, get);
             if (fileName == null) {

frontend/app/view/preview/preview-streaming.tsx

@@ -3,9 +3,11 @@
 
 import { Button } from "@/app/element/button";
 import { CenteredDiv } from "@/app/element/quickelems";
+import { globalStore } from "@/store/global";
 import { getWebServerEndpoint } from "@/util/endpoints";
 import { formatRemoteUri } from "@/util/waveutil";
 import { useAtomValue } from "jotai";
+import { useEffect } from "react";
 import { TransformComponent, TransformWrapper, useControls } from "react-zoom-pan-pinch";
 import type { SpecializedViewProps } from "./preview";
 
@@ -45,6 +47,14 @@ function StreamingImagePreview({ url }: { url: string }) {
 }
 
 function StreamingPreview({ model }: SpecializedViewProps) {
+    useEffect(() => {
+        model.refreshCallback = () => {
+            globalStore.set(model.refreshVersion, (v) => v + 1);
+        };
+        return () => {
+            model.refreshCallback = null;
+        };
+    }, []);
     const conn = useAtomValue(model.connection);
     const fileInfo = useAtomValue(model.statFile);
     const filePath = fileInfo.path;

frontend/app/view/term/term-model.ts

@@ -489,6 +489,20 @@ export class TermViewModel implements ViewModel {
             this.setTermMode(newTermMode);
             return true;
         }
+        if (keyutil.checkKeyPressed(waveEvent, "Cmd:ArrowDown")) {
+            // Scroll to bottom
+            if (this.termRef?.current?.terminal) {
+                this.termRef.current.terminal.scrollToBottom();
+            }
+            return true;
+        }
+        if (keyutil.checkKeyPressed(waveEvent, "Cmd:ArrowUp")) {
+            // Scroll to top
+            if (this.termRef?.current?.terminal) {
+                this.termRef.current.terminal.scrollToLine(0);
+            }
+            return true;
+        }
         const blockData = globalStore.get(this.blockAtom);
         if (blockData.meta?.["term:mode"] == "vdom") {
             const vdomModel = this.getVDomModel();