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 { 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;
}

function UsageBar({ label, percent, detail }: { label: string; percent: number; detail: string }) {
  return (
    <div className="flex flex-col gap-1">
      <div className="flex items-center justify-between text-xs text-fg-muted">
        <span>{label}</span>
        <span className="font-mono tabular-nums text-fg">{detail}</span>
      </div>
      <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-raised">
        <div className="h-full rounded-full bg-accent" style={{ width: `${percent}%` }} />
      </div>
    </div>
  );
}

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 (
    <div className="flex flex-col gap-3 rounded-[var(--radius-widget)] border border-border bg-surface p-4 sm:col-span-2">
      <span className="text-sm 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="flex flex-col gap-2">
          <UsageBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
          <UsageBar
            label="Memory"
            percent={usagePercent(data.memUsedBytes, data.memTotalBytes)}
            detail={`${formatBytes(data.memUsedBytes)} / ${formatBytes(data.memTotalBytes)}`}
          />
          <UsageBar
            label="Disk"
            percent={usagePercent(data.diskUsedBytes, data.diskTotalBytes)}
            detail={`${formatBytes(data.diskUsedBytes)} / ${formatBytes(data.diskTotalBytes)}`}
          />
          <div className="flex items-center justify-between text-xs text-fg-muted">
            <span>Network</span>
            <span className="font-mono tabular-nums text-fg">
              ↓ {formatBytes(data.netRxBytesPerSec)}/s · ↑ {formatBytes(data.netTxBytesPerSec)}/s
            </span>
          </div>
        </div>
      )}
    </div>
  );
}