feat: add sysinfo preview mock block

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Author: Copilot

frontend/preview/previews/sysinfo.preview-util.ts

@@ -0,0 +1,61 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export const DefaultSysinfoHistoryPoints = 140;
+export const MockSysinfoConnection = "local";
+
+const MockMemoryTotal = 32;
+const MockCoreCount = 6;
+
+function clamp(value: number, minValue: number, maxValue: number): number {
+    return Math.min(maxValue, Math.max(minValue, value));
+}
+
+function round1(value: number): number {
+    return Math.round(value * 10) / 10;
+}
+
+export function makeMockSysinfoEvent(
+    ts: number,
+    step: number,
+    scope = MockSysinfoConnection
+): Extract<WaveEvent, { event: "sysinfo" }> {
+    const baseCpu = clamp(42 + 18 * Math.sin(step / 6) + 8 * Math.cos(step / 3.5), 8, 96);
+    const memUsed = clamp(12 + 4 * Math.sin(step / 10) + 2 * Math.cos(step / 7), 6, MockMemoryTotal - 4);
+    const memAvailable = clamp(MockMemoryTotal - memUsed + 1.5, 0, MockMemoryTotal);
+    const values: Record<string, number> = {
+        cpu: round1(baseCpu),
+        "mem:total": MockMemoryTotal,
+        "mem:used": round1(memUsed),
+        "mem:free": round1(MockMemoryTotal - memUsed),
+        "mem:available": round1(memAvailable),
+    };
+
+    for (let i = 0; i < MockCoreCount; i++) {
+        const coreCpu = clamp(baseCpu + 10 * Math.sin(step / 4 + i) + i - 3, 2, 100);
+        values[`cpu:${i}`] = round1(coreCpu);
+    }
+
+    return {
+        event: "sysinfo",
+        scopes: [scope],
+        data: {
+            ts,
+            values,
+        },
+    };
+}
+
+export function makeMockSysinfoHistory(
+    numPoints = DefaultSysinfoHistoryPoints,
+    endTs = Date.now()
+): Extract<WaveEvent, { event: "sysinfo" }>[] {
+    const history: Extract<WaveEvent, { event: "sysinfo" }>[] = [];
+    const startTs = endTs - (numPoints - 1) * 1000;
+
+    for (let i = 0; i < numPoints; i++) {
+        history.push(makeMockSysinfoEvent(startTs + i * 1000, i));
+    }
+
+    return history;
+}

frontend/preview/previews/sysinfo.preview.test.ts

@@ -0,0 +1,31 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { DefaultSysinfoHistoryPoints, makeMockSysinfoEvent, makeMockSysinfoHistory } from "./sysinfo.preview-util";
+
+describe("sysinfo preview helpers", () => {
+    it("creates sysinfo events with the expected metrics", () => {
+        const event = makeMockSysinfoEvent(1000, 3);
+
+        expect(event.event).toBe("sysinfo");
+        expect(event.scopes).toEqual(["local"]);
+        expect(event.data.ts).toBe(1000);
+        expect(event.data.values.cpu).toBeGreaterThanOrEqual(0);
+        expect(event.data.values.cpu).toBeLessThanOrEqual(100);
+        expect(event.data.values["mem:used"]).toBeGreaterThan(0);
+        expect(event.data.values["mem:total"]).toBeGreaterThan(event.data.values["mem:used"]);
+        expect(event.data.values["cpu:0"]).toBeTypeOf("number");
+    });
+
+    it("creates evenly spaced sysinfo history", () => {
+        const history = makeMockSysinfoHistory(4, 4000);
+
+        expect(history).toHaveLength(4);
+        expect(history.map((event) => event.data.ts)).toEqual([1000, 2000, 3000, 4000]);
+    });
+
+    it("uses the default history length", () => {
+        expect(makeMockSysinfoHistory()).toHaveLength(DefaultSysinfoHistoryPoints);
+    });
+});

frontend/preview/previews/sysinfo.preview.tsx

@@ -0,0 +1,161 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Block } from "@/app/block/block";
+import { globalStore } from "@/app/store/jotaiStore";
+import { getTabModelByTabId, TabModelContext } from "@/app/store/tab-model";
+import { handleWaveEvent } from "@/app/store/wps";
+import { useWaveEnv, WaveEnvContext } from "@/app/waveenv/waveenv";
+import type { NodeModel } from "@/layout/index";
+import { atom } from "jotai";
+import * as React from "react";
+import { applyMockEnvOverrides, MockWaveEnv } from "../mock/mockwaveenv";
+import {
+    DefaultSysinfoHistoryPoints,
+    makeMockSysinfoEvent,
+    makeMockSysinfoHistory,
+    MockSysinfoConnection,
+} from "./sysinfo.preview-util";
+
+const PreviewWorkspaceId = "preview-sysinfo-workspace";
+const PreviewTabId = "preview-sysinfo-tab";
+const PreviewNodeId = "preview-sysinfo-node";
+const PreviewBlockId = "preview-sysinfo-block";
+
+function makeMockWorkspace(): Workspace {
+    return {
+        otype: "workspace",
+        oid: PreviewWorkspaceId,
+        version: 1,
+        name: "Preview Workspace",
+        tabids: [PreviewTabId],
+        activetabid: PreviewTabId,
+        meta: {},
+    } as Workspace;
+}
+
+function makeMockTab(): Tab {
+    return {
+        otype: "tab",
+        oid: PreviewTabId,
+        version: 1,
+        name: "Sysinfo Preview",
+        blockids: [PreviewBlockId],
+        meta: {},
+    } as Tab;
+}
+
+function makeMockBlock(): Block {
+    return {
+        otype: "block",
+        oid: PreviewBlockId,
+        version: 1,
+        meta: {
+            view: "sysinfo",
+            connection: MockSysinfoConnection,
+            "sysinfo:type": "CPU + Mem",
+            "graph:numpoints": 90,
+        },
+    } as Block;
+}
+
+function makePreviewNodeModel(): NodeModel {
+    const isFocusedAtom = atom(true);
+    const isMagnifiedAtom = atom(false);
+
+    return {
+        additionalProps: atom({} as any),
+        innerRect: atom({ width: "920px", height: "560px" }),
+        blockNum: atom(1),
+        numLeafs: atom(2),
+        nodeId: PreviewNodeId,
+        blockId: PreviewBlockId,
+        addEphemeralNodeToLayout: () => {},
+        animationTimeS: atom(0),
+        isResizing: atom(false),
+        isFocused: isFocusedAtom,
+        isMagnified: isMagnifiedAtom,
+        anyMagnified: atom(false),
+        isEphemeral: atom(false),
+        ready: atom(true),
+        disablePointerEvents: atom(false),
+        toggleMagnify: () => {
+            globalStore.set(isMagnifiedAtom, !globalStore.get(isMagnifiedAtom));
+        },
+        focusNode: () => {
+            globalStore.set(isFocusedAtom, true);
+        },
+        onClose: () => {},
+        dragHandleRef: { current: null },
+        displayContainerRef: { current: null },
+    };
+}
+
+function SysinfoPreviewInner() {
+    const baseEnv = useWaveEnv();
+    const historyRef = React.useRef(makeMockSysinfoHistory());
+    const nodeModel = React.useMemo(() => makePreviewNodeModel(), []);
+
+    const env = React.useMemo<MockWaveEnv>(() => {
+        const mockWaveObjs: Record<string, WaveObj> = {
+            [`workspace:${PreviewWorkspaceId}`]: makeMockWorkspace(),
+            [`tab:${PreviewTabId}`]: makeMockTab(),
+            [`block:${PreviewBlockId}`]: makeMockBlock(),
+        };
+
+        return applyMockEnvOverrides(baseEnv, {
+            tabId: PreviewTabId,
+            mockWaveObjs,
+            atoms: {
+                workspaceId: atom(PreviewWorkspaceId),
+                staticTabId: atom(PreviewTabId),
+            },
+            rpc: {
+                EventReadHistoryCommand: async (_client, data) => {
+                    if (data.event !== "sysinfo" || data.scope !== MockSysinfoConnection) {
+                        return [];
+                    }
+                    const maxItems = data.maxitems ?? historyRef.current.length;
+                    return historyRef.current.slice(-maxItems);
+                },
+            },
+        });
+    }, [baseEnv]);
+
+    const tabModel = React.useMemo(() => getTabModelByTabId(PreviewTabId, env), [env]);
+
+    React.useEffect(() => {
+        let nextStep = historyRef.current.length;
+        let nextTs = (historyRef.current[historyRef.current.length - 1]?.data?.ts ?? Date.now()) + 1000;
+        const intervalId = window.setInterval(() => {
+            const nextEvent = makeMockSysinfoEvent(nextTs, nextStep);
+            historyRef.current = [...historyRef.current.slice(-(DefaultSysinfoHistoryPoints - 1)), nextEvent];
+            handleWaveEvent(nextEvent);
+            nextStep++;
+            nextTs += 1000;
+        }, 1000);
+
+        return () => {
+            window.clearInterval(intervalId);
+        };
+    }, []);
+
+    return (
+        <WaveEnvContext.Provider value={env}>
+            <TabModelContext.Provider value={tabModel}>
+                <div className="flex w-full max-w-[980px] flex-col gap-2 px-6 py-6">
+                    <div className="text-xs text-muted font-mono">full sysinfo block (mock WOS + FE-only WPS events)</div>
+                    <div className="rounded-md border border-border bg-panel p-4">
+                        <div className="h-[620px]">
+                            <Block preview={false} nodeModel={nodeModel} />
+                        </div>
+                    </div>
+                </div>
+            </TabModelContext.Provider>
+        </WaveEnvContext.Provider>
+    );
+}
+
+export default function SysinfoPreview() {
+    return <SysinfoPreviewInner />;
+}