pulsenode/components/widgets/system/Widget.tsx

"use client";

import type { Widget } from "@/lib/config/schema";
import { useWidgetSubscription } from "@/lib/ws/client";
import { SkeletonLines } from "@/components/widgets/Skeleton";
import { WidgetCard } from "@/components/widgets/WidgetCard";
import { MetricBar } from "@/components/widgets/MetricBar";
import { formatBytes } from "@/lib/format";

type SystemWidget = Extract<Widget, { type: "system" }>;

function usagePercent(used: number, total: number): number {
  return total > 0 ? Math.min(100, (used / total) * 100) : 0;
}

export function SystemWidget({ widget, widgetId }: { widget: SystemWidget; widgetId: string }) {
  const result = useWidgetSubscription(widgetId);
  const data = result?.type === "system" ? result.data : null;
  const errorMessage = result?.type === "error" ? result.message : null;

  return (
    <WidgetCard span={4} rowSpan={2}>
      <div className="text-[10px] tracking-[0.1em] text-accent uppercase">System</div>
      <span className="text-[15px] font-medium text-fg">{widget.name}</span>
      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
      {!result && !errorMessage && <SkeletonLines count={3} />}
      {data && (
        <div className="mt-1 flex flex-1 flex-col justify-between gap-3">
          <div className="flex flex-col gap-3">
            <MetricBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
            <MetricBar
              label="Memory"
              percent={usagePercent(data.memUsedBytes, data.memTotalBytes)}
              detail={`${formatBytes(data.memUsedBytes)} / ${formatBytes(data.memTotalBytes)}`}
            />
            <MetricBar
              label="Disk"
              percent={usagePercent(data.diskUsedBytes, data.diskTotalBytes)}
              detail={`${formatBytes(data.diskUsedBytes)} / ${formatBytes(data.diskTotalBytes)}`}
            />
          </div>
          <div className="flex items-center gap-1.5 text-[11px] text-fg-muted">
            <span className="font-mono tabular-nums text-fg">
              ↓ {formatBytes(data.netRxBytesPerSec)}/s · ↑ {formatBytes(data.netTxBytesPerSec)}/s
            </span>
          </div>
        </div>
      )}
    </WidgetCard>
  );
}