Add full sysinfo block preview backed by mock WaveEnv/WOS data

[Copilot]

This adds a standalone preview for sysinfo using the newer WaveEnv mock pattern, but renders the full block instead of the bare view. The preview seeds a mock block in WOS (meta.view = "sysinfo"), provides history via mock RPC, and drives live updates through frontend-only WPS event dispatch.

• What changed

  • Added frontend/preview/previews/sysinfo.preview.tsx to render a full Block with sysinfo block chrome, tab/workspace context, and mock WOS objects.
  • Added frontend/preview/previews/sysinfo.preview-util.ts to generate deterministic sysinfo history + live events for preview use.
  • Added frontend/preview/previews/sysinfo.preview.test.ts to lock down the mock event/history shape used by the preview.

• Preview wiring

  • Seeds mock workspace, tab, and block objects so the preview exercises the real block path rather than a component-only render.
  • Configures the mock block metadata with:
    • view: "sysinfo"
    • connection: "local"
    • sysinfo:type: "CPU + Mem"
    • graph:numpoints
  • Overrides EventReadHistoryCommand in the preview env so SysinfoViewModel can load initial history normally.

• Live FE-only event flow

  • Uses handleWaveEvent() directly in the preview to simulate incoming sysinfo events without touching backend transport.
  • Keeps the preview aligned with the real WPS subscription path already used by sysinfo.tsx.

const env = applyMockEnvOverrides(baseEnv, {
    mockWaveObjs: {
        [`block:${PreviewBlockId}`]: {
            otype: "block",
            oid: PreviewBlockId,
            version: 1,
            meta: {
                view: "sysinfo",
                connection: "local",
                "sysinfo:type": "CPU + Mem",
                "graph:numpoints": 90,
            },
        } as Block,
    },
    rpc: {
        EventReadHistoryCommand: async (_client, data) => {
            if (data.event !== "sysinfo" || data.scope !== "local") {
                return [];
            }
            return historyRef.current.slice(-(data.maxitems ?? historyRef.current.length));
        },
    },
});

• Result

  • The preview now exercises the real sysinfo block path: block frame/header, model initialization, history load, and ongoing chart updates.

• Screenshot

  • https://github.com/user-attachments/assets/dc2ed145-9ec8-4fde-adb0-79adc62c3071

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[cloudflare-workers-and-pages]

Deploying waveterm with    Cloudflare Pages

Latest commit:	dd6ee48
Status:	✅  Deploy successful!
Preview URL:	https://8dfa5850.waveterm.pages.dev
Branch Preview URL:	https://copilot-add-sysinfo-mock-to.waveterm.pages.dev

View logs

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (3 files)

• frontend/preview/previews/sysinfo.preview-util.ts - Mock utility functions for sysinfo events
• frontend/preview/previews/sysinfo.preview.test.ts - Unit tests for mock utilities
• frontend/preview/previews/sysinfo.preview.tsx - React preview component

The code correctly:

• Uses the global WaveEvent type with proper discriminated union extraction for sysinfo events
• Creates mock data matching the TimeSeriesData type structure (ts: number, values: {[key: string]: number})
• Follows established React patterns (useMemo, useEffect with proper cleanup)
• Uses the mock environment system consistently with other preview components