First Cut at a new ProcessViewer Widget (wavetermdev#3137)

Author: sawka

frontend/app/block/block.tsx

@@ -1,16 +1,15 @@
 import {
     BlockComponentModel2,
-    BlockNodeModel,
     BlockProps,
     FullBlockProps,
     FullSubBlockProps,
     SubBlockProps,
 } from "@/app/block/blocktypes";
-import type { TabModel } from "@/app/store/tab-model";
 import { useTabModel } from "@/app/store/tab-model";
 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 { TreeViewModel } from "@/app/view/treeview/treeview-model";
 import { NotesViewModel } from "@/app/view/notes/notes-model";
 import { TodoViewModel } from "@/app/view/todo/todo-model";
@@ -33,10 +32,8 @@ import { TermHistoryViewModel } from "@/view/term/termhistory-model";
 import { WaveAiModel } from "@/view/waveai/waveai";
 import { WebViewModel } from "@/view/webview/webview";
 import clsx from "clsx";
-import { atom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import { memo, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { QuickTipsViewModel } from "../view/quicktipsview/quicktipsview";
-import { WaveConfigViewModel } from "../view/waveconfig/waveconfig-model";
 import "./block.scss";
 import { BlockFrame } from "./blockframe";
 import { blockViewToIcon, blockViewToName } from "./blockutil";
@@ -57,6 +54,7 @@ BlockRegistry.set("treeview", TreeViewModel);
 BlockRegistry.set("notes", NotesViewModel);
 BlockRegistry.set("todo", TodoViewModel);
 BlockRegistry.set("termhistory", TermHistoryViewModel);
+BlockRegistry.set("processviewer", ProcessViewerViewModel);
 
 function makeViewModel(blockId: string, blockView: string, nodeModel: BlockNodeModel, tabModel: TabModel): ViewModel {
     const ctor = BlockRegistry.get(blockView);

frontend/app/block/blockregistry.ts

@@ -0,0 +1,65 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { BlockNodeModel } from "@/app/block/blocktypes";
+import type { TabModel } from "@/app/store/tab-model";
+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 { SysinfoViewModel } from "@/app/view/sysinfo/sysinfo";
+import { TsunamiViewModel } from "@/app/view/tsunami/tsunami";
+import { VDomModel } from "@/app/view/vdom/vdom-model";
+import { WaveEnv } from "@/app/waveenv/waveenv";
+import { atom } from "jotai";
+import { QuickTipsViewModel } from "../view/quicktipsview/quicktipsview";
+import { WaveConfigViewModel } from "../view/waveconfig/waveconfig-model";
+import { blockViewToIcon, blockViewToName } from "./blockutil";
+import { HelpViewModel } from "@/view/helpview/helpview";
+import { TermViewModel } from "@/view/term/term-model";
+import { WaveAiModel } from "@/view/waveai/waveai";
+import { WebViewModel } from "@/view/webview/webview";
+
+const BlockRegistry: Map<string, ViewModelClass> = new Map();
+BlockRegistry.set("term", TermViewModel);
+BlockRegistry.set("preview", PreviewModel);
+BlockRegistry.set("web", WebViewModel);
+BlockRegistry.set("waveai", WaveAiModel);
+BlockRegistry.set("cpuplot", SysinfoViewModel);
+BlockRegistry.set("sysinfo", SysinfoViewModel);
+BlockRegistry.set("vdom", VDomModel);
+BlockRegistry.set("tips", QuickTipsViewModel);
+BlockRegistry.set("help", HelpViewModel);
+BlockRegistry.set("launcher", LauncherViewModel);
+BlockRegistry.set("tsunami", TsunamiViewModel);
+BlockRegistry.set("aifilediff", AiFileDiffViewModel);
+BlockRegistry.set("waveconfig", WaveConfigViewModel);
+BlockRegistry.set("processviewer", ProcessViewerViewModel);
+
+function makeDefaultViewModel(viewType: string): ViewModel {
+    const viewModel: ViewModel = {
+        viewType: viewType,
+        viewIcon: atom(blockViewToIcon(viewType)),
+        viewName: atom(blockViewToName(viewType)),
+        preIconButton: atom(null),
+        endIconButtons: atom(null),
+        viewComponent: null,
+    };
+    return viewModel;
+}
+
+function makeViewModel(
+    blockId: string,
+    blockView: string,
+    nodeModel: BlockNodeModel,
+    tabModel: TabModel,
+    waveEnv: WaveEnv
+): ViewModel {
+    const ctor = BlockRegistry.get(blockView);
+    if (ctor != null) {
+        return new ctor({ blockId, nodeModel, tabModel, waveEnv });
+    }
+    return makeDefaultViewModel(blockView);
+}
+
+export { makeViewModel };

frontend/app/block/blockutil.tsx

@@ -72,6 +72,9 @@ export function blockViewToIcon(view: string): string {
     if (view == "tips") {
         return "lightbulb";
     }
+    if (view == "processviewer") {
+        return "microchip";
+    }
     return "square";
 }
 
@@ -97,6 +100,9 @@ export function blockViewToName(view: string): string {
     if (view == "tips") {
         return "Tips";
     }
+    if (view == "processviewer") {
+        return "Processes";
+    }
     return view;
 }
 

frontend/app/store/wshclientapi.ts

@@ -587,6 +587,18 @@ class RpcApiType {
         return client.wshRpcCall("remotemkdir", data, opts);
     }
 
+    // command "remoteprocesslist" [call]
+    RemoteProcessListCommand(client: WshClient, data: CommandRemoteProcessListData, opts?: RpcOpts): Promise<ProcessListResponse> {
+        if (this.mockClient) return this.mockClient.mockWshRpcCall(client, "remoteprocesslist", data, opts);
+        return client.wshRpcCall("remoteprocesslist", data, opts);
+    }
+
+    // command "remoteprocesssignal" [call]
+    RemoteProcessSignalCommand(client: WshClient, data: CommandRemoteProcessSignalData, opts?: RpcOpts): Promise<void> {
+        if (this.mockClient) return this.mockClient.mockWshRpcCall(client, "remoteprocesssignal", data, opts);
+        return client.wshRpcCall("remoteprocesssignal", data, opts);
+    }
+
     // command "remotereconnecttojobmanager" [call]
     RemoteReconnectToJobManagerCommand(client: WshClient, data: CommandRemoteReconnectToJobManagerData, opts?: RpcOpts): Promise<CommandRemoteReconnectToJobManagerRtnData> {
         return client.wshRpcCall("remotereconnecttojobmanager", data, opts);