add context menu items for terminal (splits, open url, themes, file browser, etc) (#2745)

sawka · web-flow · commit 5b94b9559fe4 · 2026-01-05T16:32:34.000-08:00
diff --git a/frontend/app/block/blocktypes.ts b/frontend/app/block/blocktypes.ts
@@ -7,8 +7,10 @@ import { Atom } from "jotai";
 export interface BlockNodeModel {
     blockId: string;
     isFocused: Atom<boolean>;
+    isMagnified: Atom<boolean>;
     onClose: () => void;
     focusNode: () => void;
+    toggleMagnify: () => void;
 }
 
 export type FullBlockProps = {
diff --git a/frontend/app/view/term/term-model.ts b/frontend/app/view/term/term-model.ts
@@ -1,6 +1,7 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { WaveAIModel } from "@/app/aipanel/waveai-model";
 import { BlockNodeModel } from "@/app/block/blocktypes";
 import { appHandleKeyDown } from "@/app/store/keymodel";
 import type { TabModel } from "@/app/store/tab-model";
@@ -14,6 +15,9 @@ import { VDomModel } from "@/app/view/vdom/vdom-model";
 import { WorkspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
 import {
     atoms,
+    createBlock,
+    createBlockSplitHorizontally,
+    createBlockSplitVertically,
     getAllBlockComponentModels,
     getApi,
     getBlockComponentModel,
@@ -663,6 +667,97 @@ export class TermViewModel implements ViewModel {
         prtn.catch((e) => console.log("error controller resync (force restart)", e));
     }
 
+    getContextMenuItems(): ContextMenuItem[] {
+        const menu: ContextMenuItem[] = [];
+        const hasSelection = this.termRef.current?.terminal?.hasSelection();
+        const selection = hasSelection ? this.termRef.current?.terminal.getSelection() : null;
+
+        if (hasSelection) {
+            menu.push({
+                label: "Copy",
+                click: () => {
+                    if (selection) {
+                        navigator.clipboard.writeText(selection);
+                    }
+                },
+            });
+            menu.push({ type: "separator" });
+            menu.push({
+                label: "Send to Wave AI",
+                click: () => {
+                    if (selection) {
+                        const aiModel = WaveAIModel.getInstance();
+                        aiModel.appendText(selection, true, { scrollToBottom: true });
+                        const layoutModel = WorkspaceLayoutModel.getInstance();
+                        if (!layoutModel.getAIPanelVisible()) {
+                            layoutModel.setAIPanelVisible(true);
+                        }
+                        aiModel.focusInput();
+                    }
+                },
+            });
+
+            let selectionURL: URL = null;
+            if (selection) {
+                try {
+                    const trimmedSelection = selection.trim();
+                    const url = new URL(trimmedSelection);
+                    if (url.protocol.startsWith("http")) {
+                        selectionURL = url;
+                    }
+                } catch (e) {
+                    // not a valid URL
+                }
+            }
+
+            if (selectionURL) {
+                menu.push({ type: "separator" });
+                menu.push({
+                    label: "Open URL (" + selectionURL.hostname + ")",
+                    click: () => {
+                        createBlock({
+                            meta: {
+                                view: "web",
+                                url: selectionURL.toString(),
+                            },
+                        });
+                    },
+                });
+                menu.push({
+                    label: "Open URL in External Browser",
+                    click: () => {
+                        getApi().openExternal(selectionURL.toString());
+                    },
+                });
+            }
+            menu.push({ type: "separator" });
+        }
+
+        menu.push({
+            label: "Paste",
+            click: () => {
+                getApi().nativePaste();
+            },
+        });
+
+        menu.push({ type: "separator" });
+
+        const magnified = globalStore.get(this.nodeModel.isMagnified);
+        menu.push({
+            label: magnified ? "Un-Magnify Block" : "Magnify Block",
+            click: () => {
+                this.nodeModel.toggleMagnify();
+            },
+        });
+
+        menu.push({ type: "separator" });
+
+        const settingsItems = this.getSettingsMenuItems();
+        menu.push(...settingsItems);
+
+        return menu;
+    }
+
     getSettingsMenuItems(): ContextMenuItem[] {
         const fullConfig = globalStore.get(atoms.fullConfigAtom);
         const termThemes = fullConfig?.termthemes ?? {};
@@ -677,7 +772,61 @@ export class TermViewModel implements ViewModel {
         termThemeKeys.sort((a, b) => {
             return (termThemes[a]["display:order"] ?? 0) - (termThemes[b]["display:order"] ?? 0);
         });
+        const defaultTermBlockDef: BlockDef = {
+            meta: {
+                view: "term",
+                controller: "shell",
+            },
+        };
+
         const fullMenu: ContextMenuItem[] = [];
+        fullMenu.push({
+            label: "Split Horizontally",
+            click: () => {
+                const blockData = globalStore.get(this.blockAtom);
+                const blockDef: BlockDef = {
+                    meta: blockData?.meta || defaultTermBlockDef.meta,
+                };
+                createBlockSplitHorizontally(blockDef, this.blockId, "after");
+            },
+        });
+        fullMenu.push({
+            label: "Split Vertically",
+            click: () => {
+                const blockData = globalStore.get(this.blockAtom);
+                const blockDef: BlockDef = {
+                    meta: blockData?.meta || defaultTermBlockDef.meta,
+                };
+                createBlockSplitVertically(blockDef, this.blockId, "after");
+            },
+        });
+        fullMenu.push({ type: "separator" });
+
+        const shellIntegrationStatus = globalStore.get(this.termRef?.current?.shellIntegrationStatusAtom);
+        const cwd = blockData?.meta?.["cmd:cwd"];
+        const canShowFileBrowser = shellIntegrationStatus === "ready" && cwd != null;
+
+        if (canShowFileBrowser) {
+            fullMenu.push({
+                label: "File Browser",
+                click: () => {
+                    const blockData = globalStore.get(this.blockAtom);
+                    const connection = blockData?.meta?.connection;
+                    const cwd = blockData?.meta?.["cmd:cwd"];
+                    const meta: Record<string, any> = {
+                        view: "preview",
+                        file: cwd,
+                    };
+                    if (connection) {
+                        meta.connection = connection;
+                    }
+                    const blockDef: BlockDef = { meta };
+                    createBlock(blockDef);
+                },
+            });
+            fullMenu.push({ type: "separator" });
+        }
+
         const submenu: ContextMenuItem[] = termThemeKeys.map((themeName) => {
             return {
                 label: termThemes[themeName]["display:name"] ?? themeName,
@@ -765,8 +914,10 @@ export class TermViewModel implements ViewModel {
             label: "Transparency",
             submenu: transparencySubMenu,
         });
+        fullMenu.push({ type: "separator" });
+        const advancedSubmenu: ContextMenuItem[] = [];
         const allowBracketedPaste = blockData?.meta?.["term:allowbracketedpaste"];
-        fullMenu.push({
+        advancedSubmenu.push({
             label: "Allow Bracketed Paste Mode",
             submenu: [
                 {
@@ -804,13 +955,12 @@ export class TermViewModel implements ViewModel {
                 },
             ],
         });
-        fullMenu.push({ type: "separator" });
-        fullMenu.push({
+        advancedSubmenu.push({
             label: "Force Restart Controller",
             click: this.forceRestartController.bind(this),
         });
         const isClearOnStart = blockData?.meta?.["cmd:clearonstart"];
-        fullMenu.push({
+        advancedSubmenu.push({
             label: "Clear Output On Restart",
             submenu: [
                 {
@@ -838,7 +988,7 @@ export class TermViewModel implements ViewModel {
             ],
         });
         const runOnStart = blockData?.meta?.["cmd:runonstart"];
-        fullMenu.push({
+        advancedSubmenu.push({
             label: "Run On Startup",
             submenu: [
                 {
@@ -865,17 +1015,8 @@ export class TermViewModel implements ViewModel {
                 },
             ],
         });
-        if (blockData?.meta?.["term:vdomtoolbarblockid"]) {
-            fullMenu.push({ type: "separator" });
-            fullMenu.push({
-                label: "Close Toolbar",
-                click: () => {
-                    RpcApi.DeleteSubBlockCommand(TabRpcClient, { blockid: blockData.meta["term:vdomtoolbarblockid"] });
-                },
-            });
-        }
         const debugConn = blockData?.meta?.["term:conndebug"];
-        fullMenu.push({
+        advancedSubmenu.push({
             label: "Debug Connection",
             submenu: [
                 {
@@ -913,6 +1054,19 @@ export class TermViewModel implements ViewModel {
                 },
             ],
         });
+        fullMenu.push({
+            label: "Advanced",
+            submenu: advancedSubmenu,
+        });
+        if (blockData?.meta?.["term:vdomtoolbarblockid"]) {
+            fullMenu.push({ type: "separator" });
+            fullMenu.push({
+                label: "Close Toolbar",
+                click: () => {
+                    RpcApi.DeleteSubBlockCommand(TabRpcClient, { blockid: blockData.meta["term:vdomtoolbarblockid"] });
+                },
+            });
+        }
         return fullMenu;
     }
 }
diff --git a/frontend/app/view/term/term.tsx b/frontend/app/view/term/term.tsx
@@ -2,7 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Block, SubBlock } from "@/app/block/block";
+import type { BlockNodeModel } from "@/app/block/blocktypes";
 import { Search, useSearch } from "@/app/element/search";
+import { ContextMenuModel } from "@/app/store/contextmenu";
 import { useTabModel } from "@/app/store/tab-model";
 import { waveEventSubscribe } from "@/app/store/wps";
 import { RpcApi } from "@/app/store/wshclientapi";
@@ -70,16 +72,21 @@ const TermVDomToolbarNode = ({ vdomBlockId, blockId, model }: TerminalViewProps
             unsub();
         };
     }, []);
-    let vdomNodeModel = {
-        blockId: vdomBlockId,
-        isFocused: jotai.atom(false),
-        focusNode: () => {},
-        onClose: () => {
-            if (vdomBlockId != null) {
-                RpcApi.DeleteSubBlockCommand(TabRpcClient, { blockid: vdomBlockId });
-            }
-        },
-    };
+    const vdomNodeModel: BlockNodeModel = React.useMemo(
+        () => ({
+            blockId: vdomBlockId,
+            isFocused: jotai.atom(false),
+            isMagnified: jotai.atom(false),
+            focusNode: () => {},
+            toggleMagnify: () => {},
+            onClose: () => {
+                if (vdomBlockId != null) {
+                    RpcApi.DeleteSubBlockCommand(TabRpcClient, { blockid: vdomBlockId });
+                }
+            },
+        }),
+        [vdomBlockId]
+    );
     const toolbarTarget = jotai.useAtomValue(model.vdomToolbarTarget);
     const heightStr = toolbarTarget?.height ?? "1.5em";
     return (
@@ -108,21 +115,25 @@ const TermVDomNodeSingleId = ({ vdomBlockId, blockId, model }: TerminalViewProps
             unsub();
         };
     }, []);
-    const isFocusedAtom = jotai.atom((get) => {
-        return get(model.nodeModel.isFocused) && get(model.termMode) == "vdom";
-    });
-    let vdomNodeModel = {
-        blockId: vdomBlockId,
-        isFocused: isFocusedAtom,
-        focusNode: () => {
-            model.nodeModel.focusNode();
-        },
-        onClose: () => {
-            if (vdomBlockId != null) {
-                RpcApi.DeleteSubBlockCommand(TabRpcClient, { blockid: vdomBlockId });
-            }
-        },
-    };
+    const vdomNodeModel: BlockNodeModel = React.useMemo(() => {
+        const isFocusedAtom = jotai.atom((get) => {
+            return get(model.nodeModel.isFocused) && get(model.termMode) == "vdom";
+        });
+        return {
+            blockId: vdomBlockId,
+            isFocused: isFocusedAtom,
+            isMagnified: jotai.atom(false),
+            focusNode: () => {
+                model.nodeModel.focusNode();
+            },
+            toggleMagnify: () => {},
+            onClose: () => {
+                if (vdomBlockId != null) {
+                    RpcApi.DeleteSubBlockCommand(TabRpcClient, { blockid: vdomBlockId });
+                }
+            },
+        };
+    }, [vdomBlockId, model]);
     return (
         <div key="htmlElem" className="term-htmlelem">
             <SubBlock key="vdom" nodeModel={vdomNodeModel} />
@@ -353,8 +364,18 @@ const TerminalView = ({ blockId, model }: ViewComponentProps<TermViewModel>) =>
 
     const termBg = computeBgStyleFromMeta(blockData?.meta);
 
+    const handleContextMenu = React.useCallback(
+        (e: React.MouseEvent<HTMLDivElement>) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const menuItems = model.getContextMenuItems();
+            ContextMenuModel.showContextMenu(menuItems, e);
+        },
+        [model]
+    );
+
     return (
-        <div className={clsx("view-term", "term-mode-" + termMode)} ref={viewRef}>
+        <div className={clsx("view-term", "term-mode-" + termMode)} ref={viewRef} onContextMenu={handleContextMenu}>
             {termBg && <div className="absolute inset-0 z-0 pointer-events-none" style={termBg} />}
             <TermResyncHandler blockId={blockId} model={model} />
             <TermThemeUpdater blockId={blockId} model={model} termRef={model.termRef} />
diff --git a/frontend/util/previewutil.ts b/frontend/util/previewutil.ts
@@ -59,7 +59,7 @@ export function addOpenMenuItems(menu: ContextMenuItem[], conn: string, finfo: F
     // TODO: improve behavior as we add more connection types
     if (!conn?.startsWith("aws:")) {
         menu.push({
-            label: "Open Terminal in New Block",
+            label: "Open Terminal Here",
             click: () => {
                 const termBlockDef: BlockDef = {
                     meta: {
