First Cut at a new ProcessViewer Widget (#3137)

Author: sawka

.kilocode/skills/create-view/SKILL.md

@@ -203,9 +203,11 @@ export const MyView: React.FC<ViewComponentProps<MyViewModel>> = ({
 
 ### 3. Register the View
 
-Add your view to the `BlockRegistry` in `frontend/app/block/block.tsx`:
+Add your view to the `BlockRegistry` in `frontend/app/block/blockregistry.ts`:
 
 ```typescript
+import { MyViewModel } from "@/app/view/myview/myview-model";
+
 const BlockRegistry: Map<string, ViewModelClass> = new Map();
 BlockRegistry.set("term", TermViewModel);
 BlockRegistry.set("preview", PreviewModel);

frontend/app/block/block.tsx

@@ -3,21 +3,13 @@
 
 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 { SysinfoViewModel } from "@/app/view/sysinfo/sysinfo";
-import { TsunamiViewModel } from "@/app/view/tsunami/tsunami";
-import { VDomModel } from "@/app/view/vdom/vdom-model";
-import { useWaveEnv, WaveEnv } from "@/app/waveenv/waveenv";
+import { useWaveEnv } from "@/app/waveenv/waveenv";
 import { ErrorBoundary } from "@/element/errorboundary";
 import { CenteredDiv } from "@/element/quickelems";
 import { useDebouncedNodeInnerRect } from "@/layout/index";
@@ -26,48 +18,13 @@ import { getBlockComponentModel, registerBlockComponentModel, unregisterBlockCom
 import { makeORef } from "@/store/wos";
 import { focusedBlockId, getElemAsStr } from "@/util/focusutil";
 import { isBlank, useAtomValueSafe } from "@/util/util";
-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";
 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 { BlockEnv } from "./blockenv";
 import { BlockFrame } from "./blockframe";
-import { blockViewToIcon, blockViewToName } from "./blockutil";
-
-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);
-
-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);
-}
+import { makeViewModel } from "./blockregistry";
 
 function getViewElem(
     blockId: string,
@@ -86,18 +43,6 @@ function getViewElem(
     return <VC key={blockId} blockId={blockId} blockRef={blockRef} contentRef={contentRef} model={viewModel} />;
 }
 
-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;
-}
-
 const BlockPreview = memo(({ nodeModel, viewModel }: FullBlockProps) => {
     const waveEnv = useWaveEnv<BlockEnv>();
     const blockIsNull = useAtomValue(waveEnv.wos.isWaveObjectNullAtom(makeORef("block", nodeModel.blockId)));
@@ -250,8 +195,7 @@ const BlockFull = memo(({ nodeModel, viewModel }: FullBlockProps) => {
     const focusFromPointerEnter = useCallback(
         (event: React.PointerEvent<HTMLDivElement>) => {
             const focusFollowsCursorEnabled =
-                focusFollowsCursorMode === "on" ||
-                (focusFollowsCursorMode === "term" && blockView === "term");
+                focusFollowsCursorMode === "on" || (focusFollowsCursorMode === "term" && blockView === "term");
             if (!focusFollowsCursorEnabled || event.pointerType === "touch" || event.buttons > 0) {
                 return;
             }

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

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

frontend/app/store/wshclientapi.ts

@@ -756,6 +756,18 @@ export 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> {
         if (this.mockClient) return this.mockClient.mockWshRpcCall(client, "remotereconnecttojobmanager", data, opts);