Function SystemInfo

src/components/SystemInfo.tsx:34–141

({ data }: SystemInfoProps)

}

export function SystemInfo({ data }: SystemInfoProps) {
  if (!data) {
    return (
      <div 
        className="rounded-xl p-6 animate-pulse"
        style={{ backgroundColor: "var(--card)" }}
      >
        <div 
          className="h-6 rounded w-1/3 mb-4"
          style={{ backgroundColor: "var(--border)" }}
        ></div>
        <div className="space-y-3">
          <div className="h-4 rounded w-2/3" style={{ backgroundColor: "var(--border)" }}></div>
          <div className="h-4 rounded w-1/2" style={{ backgroundColor: "var(--border)" }}></div>
          <div className="h-4 rounded w-3/4" style={{ backgroundColor: "var(--border)" }}></div>
        </div>
      </div>
    );
  }

  const infoItems = [
    {
      icon: Server,
      label: "Agent Name",
      value: `${data.agent.emoji} ${data.agent.name}`,
      sublabel: data.agent.creature,
    },
    {
      icon: Clock,
      label: "Uptime",
      value: data.system.uptimeFormatted,
      sublabel: `${data.system.hostname}`,
    },
    {
      icon: Cpu,
      label: "Node.js Version",
      value: data.system.nodeVersion,
      sublabel: data.system.platform,
    },
    {
      icon: Brain,
      label: "Current Model",
      value: data.system.model.split("/").pop() || data.system.model,
      sublabel: data.system.model.includes("/") ? data.system.model.split("/")[0] : "provider",
    },
    {
      icon: FolderOpen,
      label: "Workspace",
      value: data.system.workspacePath.split("/").pop() || "workspace",
      sublabel: data.system.workspacePath,
    },
    {
      icon: HardDrive,
      label: "Memory",
      value: `${formatBytes(data.system.memory.used)} / ${formatBytes(data.system.memory.total)}`,
      sublabel: `${formatBytes(data.system.memory.free)} free`,
    },
  ];